第三讲 React组件props的基本使用

Sian

1、上一讲中实现了组合组件的基本使用，但组件中的值是固定的，没有通过外部传值来决定内容的显示；
2、组件的调用时也没有给定属性值，如果需要传值形式如下

[JavaScript] 纯文本查看 复制代码

01 02 03 04 05 06 07 08 09 10

// 未传值      ReactDOM.render(        <WebShow  />,        document.getElementById("container")      ); // 传值      ReactDOM.render(        <WebShow wname="Sian" wlink="http://www.yusian.com" />,        document.getElementById("container")      );

3、调用时传值进来的属性在定义时接收并使用，通过this.props.xxxx获取

[JavaScript] 纯文本查看 复制代码

01 02 03 04 05 06 07 08 09 10

var WebShow = React.createClass({   render:function(){     return(       <div>       <WebName webname={this.props.wname} />       <WebLink weblink={this.props.wlink} />       </div>     );   } });

4、如果是组合组件，值还可以再次往下级子组件中传递

[JavaScript] 纯文本查看 复制代码

01 02 03 04 05 06 07 08 09 10 11

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>;   } });

5、效果链接：http://www.yusian.com/react/props/index.html