props是组件自身的属性,一般用于嵌套的内层组件中,负责传递信息(通常是由父层组件向子层组件传递)
注意:props对象中的属性与组件的属性一一对应,不要直接去修改props中属性的值
<script type="text/babel"> //在此写React代码 var WebName = React.createClass({ render:function () { return <h1>{this.props.webname}</h1>; } }); var WebLink = React.createClass({ render: function () { return <a href = {this.props.weblink}>{this.props.weblink}</a>; } }); var WebShow = React.createClass({ render:function () { return( <div> <WebName webname = {this.props.wname} /> <WebLink weblink = {this.props.wlink} /> </div> ) } }); ReactDOM.render( <WebShow wname = "lanou" wlink = "https://www.baidu.com/" />, document.getElementById("container") ); </script>
...this.props
props提供的语法糖,可以将父组件中的全部属性复制给子组件
var Link = React.createClass({ render:function () { return <a {...this.props}>{this.props.name}</a> } }); ReactDOM.render( <Link href="https://www.baidu.com" name="lanou" />, document.getElementById("container") );