
18929371983
時(shí)間:2017/4/3 9:01:47
回答(1).處理 React 組件之間的交流方式,主要取決于組件之間的關(guān)系,然而這些關(guān)系的約定人就是你。 我不會(huì)講太多關(guān)于 data-stores、data-adapters 或者 data-helpers 之類的話題。我下面只專注于 React 組件本身的交流方式的講解。 React 組件之間交流的方式,可以分為以下 3 種: 【父組件】向【子組件】傳值; 【子組件】向【父組件】傳值; 沒有任何嵌套關(guān)系的組件之間傳值(PS:比如:兄弟組件之間傳值) 一、【父組件】向【子組件】傳值 初步使用 這個(gè)是相當(dāng)容易的,在使用 React 開發(fā)的過程中經(jīng)常會(huì)使用到,主要是利用 props 來進(jìn)行交流。例子如下: // 父組件 var MyContainer = React.createClass({ getInitialState: function () { return { checked: true }; }, render: function() { return ( <ToggleButton text="Toggle me" checked={this.state.checked} /> ); } }); // 子組件 var ToggleButton = React.createClass({ render: function () { // 從【父組件】獲取的值 var checked = this.props.checked, text = this.props.text; return ( <label>{text}: <input type="checkbox" checked={checked} /></label> ); } }); 進(jìn)一步討論 如果組件嵌套層次太深,那么從外到內(nèi)組件的交流成本就變得很高,通過 props 傳遞值的優(yōu)勢(shì)就不那么明顯了。(PS:所以我建議盡可能的減少組件的層次,就像寫 HTML 一樣,簡(jiǎn)單清晰的結(jié)構(gòu)更惹人愛) // 父組件 var MyContainer = React.createClass({ render: function() { return ( <Intermediate text="where is my son?" /> ); } }); // 子組件1:中間嵌套的組件 var Intermediate = React.createClass({ render: function () { return ( <Child text={this.props.text} /> ); } }); // 子組件2:子組件1的子組件 var Child = React.createClass({ render: function () { return ( <span>{this.props.text}</span> ); } }); ......
![]() |
|||