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

Sian

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

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

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

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

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

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

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

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

     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