<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/browser.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.bodystyle{
width: 100%;
height: 100%;
background: brown;
}
.borderstyle{
border: 1px solid #ccc;
background: #ffffff;
width: 12%;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/babel">
var Crud = React.createClass({
edit:function(){
alert(‘点击编辑了‘);
},
del:function(){
alert(‘点击删除了‘)
},
render:function(){
return (
<div className="borderstyle">
<div>{this.props.children}</div>
<button onClick={this.edit}>编辑</button>
<button onClick={this.del}>删除</button>
</div>
);
}
});
ReactDOM.render(
<div className="bodystyle">
<Crud>Hello world</Crud>
<Crud>Hello react</Crud>
</div>,
document.getElementById(‘container‘)
);
</script>
</html>
时间： 2024-11-08 23:55:28