props

一、props介绍

1. 组件自身的属性对象、一般用于嵌套内外层组件中、负责传递传递数据、通常是由父层组件向子层组件传递。
2. props对象中的属性与组件中的属性一一对应、不要直接修改props中的属性的值。

二、案例

/*
   定义一个WebShow组件，输出网址的名字和地址，网址是一个可以点击的链接
   分析：定义一个组件WebName负责网址名字的输出，定义组件WebLink输出网址地址，并且可以打开链接

   思路：
   1.给WebShow设置两个属性，wName、wLink
   2.WebShow的props增加了两个属性值
   3.WebName从WebShow的props对象中获取wName的值，即网址的名称。
 */

1. 定义WebName组件，显示网站名称

    var WebName = React.createClass({
      render : function(){
        return 
   {this.props.webname}
      }
    });

   注意：this.props.webname是接收父组件的传值。
2. 定义WebLink组件，显示网站网址

   var WebLink = React.createClass({
     render : function(){
       return {this.props.weblink}
     }
   });

   注意：this.props.weblink是接收父组件的传值。
   
3. 定义WebShow组合组件

   var WebShow = React.createClass({
     render : function(){
       return (
         
   
           
           
         
       )
     }
   });

   注意：this.props.wname和this.props.wlink接收上级的传值，并且在这里将接收的值也传递给了子组件。
   
4. 渲染界面

    ReactDOM.render(
      ,
      document.getElementById("container")
    );
   

   注意：wname和wlink分别给WebShow组件传值。

三、案例代码

四、案例展示