标签：
组件嵌套后，父组件怎么向子组件发送数据呢？
答案是： this.props
<script type="text/babel"> var MyFirst = React.createClass({ getInitialState : function(){ return { myMessage: [‘我是父组件data1‘,‘我是父组件data2‘,‘我是父组件data3‘,] } }, render : function(){ return ( <div> <h3>父组件</h3> <MySecond name={this.state.myMessage} /> </div> ) } }); var MySecond = React.createClass({ render : function(){ var msg = []; var message = this.props.name; message.forEach(function(value,key){ msg.push( <p key={key}>我的消息{key}:{value}</p> ) }) return ( <div> {msg} </div> ) } }) var haFirst = ReactDOM.render( <MyFirst />, document.getElementById("test"), function(){ console.log(‘编译完成!‘); } ) </script>
有的时候父组件传过来的数据类型跟子组件需要的类型不一样，那该怎么办呢？
PropTypes属性，就是用来验证组件实例的属性是否符合要求
var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } });
PropTypes的类型有很多：
React.PropTypes.array React.PropTypes.bool React.PropTypes.func React.PropTypes.number React.PropTypes.object React.PropTypes.string React.PropTypes.node React.PropTypes.element
若属性不符合要求此外，我们可以用getDefaultProps 方法可以用来设置组件属性的默认值
<script type="text/babel"> var MyFirst = React.createClass({ getInitialState : function(){ return { myMessage: [‘我是父组件data1‘,‘我是父组件data2‘,‘我是父组件data3‘,] } }, render : function(){ return ( <div> <h3>父组件</h3> <MySecond /> </div> ) } }); var MySecond = React.createClass({ getDefaultProps : function(){ //设置默认值 return { name : [1,2,3] } }, PropTypes : { //定义变量的类型：数组且必须 name : React.PropTypes.array.isRequired }, render : function(){ var msg = []; var message = this.props.name; message.forEach(function(value,key){ msg.push( <p key={key}>我的消息{key}:{value}</p> ) }) return ( <div> {msg} </div> ) } }) var haFirst = ReactDOM.render( <MyFirst />, document.getElementById("test"), function(){ console.log(‘编译完成!‘); } ) </script>
如上：父组件如果没有给子组件传值，或者传值的类型不对，子组件将自动调用默认值1,2,3
PS:当你在写react的时候报了类似于这样子的错：Each child in an array or iterator should have a unique “key” prop.
解决办法只要在循环的每个子项添加一个key就行了，代码如下：
var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; ReactDOM.render( <div> { names.map(function (name, key) { return <div key={key}>Hello, {name}!</div> }) } </div>, document.getElementById(‘example‘) );
标签：
原文地址：http://www.cnblogs.com/bq-med/p/4972994.html
