React學習筆記(三) 組件傳值

標籤：

組件嵌套後，父組件怎麼向子組件發送資料呢？

答案是： 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.arrayReact.PropTypes.boolReact.PropTypes.funcReact.PropTypes.numberReact.PropTypes.objectReact.PropTypes.stringReact.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‘));

 

React學習筆記(三) 組件傳值