react元件之間的傳值
阿新 • • 發佈:2018-12-31
原著序
處理 React 元件之間的交流方式,主要取決於元件之間的關係,然而這些關係的約定人就是你。
我不會講太多關於 data-stores、data-adapters 或者 data-helpers 之類的話題。我下面只專注於 React 元件本身的交流方式的講解。
React 元件之間交流的方式,可以分為以下 3 種:
- 【父元件】向【子元件】傳值;
- 【子元件】向【父元件】傳值;
- 沒有任何巢狀關係的元件之間傳值(PS:比如:兄弟元件之間傳值)
一、【父元件】向【子元件】傳值
初步使用
這個是相當容易的,在使用 React 開發的過程中經常會使用到,主要是利用 props 來進行交流。例子如下:
// 父元件
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>
);
}
});
進一步討論
如果元件巢狀層次太深,那麼從外到內元件的交流成本就變得很高,通過 props 傳遞值的優勢就不那麼明顯了。(PS:所以我建議儘可能的減少元件的層次,就像寫 HTML 一樣,簡單清晰的結構更惹人愛)
// 父元件
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>
);
}
});
二、【子元件】向【父元件】傳值
接下來,我們介紹【子元件】控制自己的 state 然後告訴【父元件】的點選狀態,然後在【父元件】中展示出來。因此,我們新增一個 change 事件來做互動。
// 父元件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: false
};
},
onChildChanged: function (newState) {
this.setState({
checked: newState
});
},
render: function() {
var isChecked = this.state.checked ? 'yes' : 'no';
return (
<div>
<div>Are you checked: {isChecked}</div>
<ToggleButton text="Toggle me"
initialChecked={this.state.checked}
callbackParent={this.onChildChanged}
/>
</div>
);
}
});
// 子元件
var ToggleButton = React.createClass({
getInitialState: function () {
return {
checked: this.props.initialChecked
};
},
onTextChange: function () {
var newState = !this.state.checked;
this.setState({
checked: newState
});
// 這裡要注意:setState 是一個非同步方法,所以需要操作快取的當前值
this.props.callbackParent(newState);
},
render: function () {
// 從【父元件】獲取的值
var text = this.props.text;
// 元件自身的狀態資料
var checked = this.state.checked;
return (
<label>{text}: <input type="checkbox" checked={checked} onChange={this.onTextChange} /></label>
);
}
});