React入门之--组件属性的传递
程序员文章站
2022-07-14 18:27:06
...
废话不多说，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性从最外层传到最里层的实现</title>
<script src="../dist/browser.min.js"></script>
<script src="../dist/jquery.js"></script>
<script src="../dist/react.js"></script>
<script src="../dist/react-dom.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector('#container');
var Display = React.createClass({
render: function () {
return (
<div>
<p>{this.props.color}</p>
<p>{this.props.num}</p>
<p>{this.props.size}</p>
</div>
);
}
});
var Label = React.createClass({
render: function () {
return (
//简单写法
<Display {...this.props}/>
// <Display color={this.props.color} num={this.props.num} size={this.props.size}></Label>
);
}
});
var Shirt = React.createClass({
render: function () {
return (
<Label {...this.props}/>
// <Label color={this.props.color} num={this.props.num} size={this.props.size}></Label>
)
}
})
ReactDOM.render(
<div>
<Shirt color="deepblue" num="3.14" size="medium"></Shirt>
</div>,
destination
)
</script>
</body>
</html>
上一篇： Python 算法之一
下一篇： java 类和对象