菜鸡ReactJs-04 组件的参数props

目标是从父组件继承参数进子组件内容

1：先新建一个父组件，并且获得父组件的标题，获得父组件conts内容赋给一个messages。

//创建一个父组件叫TestZ
var TestZ = React.createClass({
    getInitialState:function(){
      return {
        isVisible:true,
        title:'父组件的标题',
        conts:[
          '创建日期：2016',
          '创建人：Jackson',
        ]
      }
    },

    render:function(){
      return (
        <div>
          //通过this.state.cont获取组件内容。
          <h1>父组件的conts内容：{this.state.conts}</h1>
          //通过this.state.conts获取组件内容并且赋给messages。并且把子组件TestS嵌套进父组件。
          <TestS messages = {this.state.conts}/>
        </div>
      )
    }
  });

2：创建一个子组件叫TestS

//创建一个子组件
  var TestS = React.createClass({
    //检查messages的类型。
    propTypes:{
      messages: React.PropTypes.array.isRequired,
    },
    //getDefaultProps来设置messages默认值。
    getDefaultProps:function(){
      return {
        messages: ['默认的子消息'],
      }
    },
      
    render:function(){
      var msgs =[]; 
      //通过props来继承messages内容，（这里父组件costs的内容已传递给了messages），并且遍历出来插入新定义的变量msgs。
      this.props.messages.forEach(function(msg,index){
          msgs.push(
            <p>子组件继承的内容：{msg}</p>
          )
      });

      return(
        
        <div>
          <h1>子组件的标题</h1>
          //在子组件内展示出msgs，这个继承自父组件并在构建组件时改变过了。
          {msgs}
        </div>
        
      )
    }
  });

3：插入DOMTERR

React.render(
    <TestZ />,
    document.getElementById('TestCont'),
    function(){
      console.log('渲染完成。。。')}
  )