本篇文章主要介紹了React組件間通訊的實例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
最近學習淺嘗則止的學習了一下react.js這個UI的框架，react這個庫給我的最大的感覺就是它能夠完全的接管UI層，在要改變視圖的東西的時候只需要改變其this.state中的狀態。只要操作資料層的東西視圖層就會發生變化，這一點我還是很喜歡的。可以擺脫對DOM的直接操作，畢竟直接來會比較複雜，本來應該是邏輯層js中混雜著各種css的字串，對於我來說有點不爽（JSX中也混雜著這標籤，但我覺的不應該把它看作標籤，看作語句會習慣一點）。
回到幾天的重點，講react元件之間的狀態傳遞。
上程式碼：
1.定義兩個子元件child-1與child-2
//child-1 子组件-1为输入框
class Input extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <input type="text"/>
}
}
//child-2 子组-2为显示框
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <p></p>
}
}2.定義父元件Parent並且將兩個子元件插入到父元件中
class Parent extends React.Component{
constructor(...args){
super(...args);
}
render(){
return(
<p>
<Input}/>
<Show/>
</p>
);
}
}現在的任務是在元件1總輸入一些文字，同時在組件2中同時顯示。
分析：要讓元件2與元件1同步，就讓元件1和2都去綁定父元件的狀態。也就是說讓兩個組件受控。資料的走向是，元件1將自身的資料提升到父層，並且保存在父層的狀態中。父層中的資料透過元件2中的props屬性傳遞到元件2中，並在視圖層進行綁定。
第一步先綁定
//在父层中的constructor中定义状态为一个空的message，this.state = {message:''}
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
}然後在父元件中的
<Show onShow={this.state.message}/>接著來我們進入
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <p>{this.props.onShow}</p>
}這樣元件2顯示層的資料已經綁定好了，接下來我們只要改變父親層狀態中的message的內容就可以使綁定的顯示層的內容跟著一起變化
將輸入層的狀態(數據)提升到父親組件中.下面是改寫後的組件1
class Input extends React.Component{
constructor(...args){
super(...args);
}
//将输入的内容更新到自身组件的状态中,并且将改变后的状态作为参数传递给该组件的一个自定义属性onInp()
fn(ev){
this.props.onInp(ev.target.value);
}
render(){
//用onInput(注意react中采用驼峰写法和原生的略有不同)绑定fn()函数
return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/>
}
}看到這裡可能會有一個問題:onInp()和content沒有啊?不要急,接著看
接著改寫父元件中的輸入層子元件1,
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
};
}
//传进的text是其提升上来的状态,然后再更新父组件的状态
fn(text){
this.setState({
message:text
})
}
render(){
return(
/*
onInp就出现在这里,并绑定一个函数,
并且有一个content将父组件的状态同步到子组件中
*/
<Show onShow={this.state.message}/>
);
}
}寫完的程式碼是這樣的
##
// 父组
class Parent extends React.Component{
constructor(...args){
super(...args);
this.state = {
message:''
};
}
onInp(text){
this.setState({
message:text
})
}
render(){
return(
<Show onShow={this.state.message}/>
);
}
}
//child-1
class Input extends React.Component{
constructor(...args){
super(...args);
}
fn(ev){
this.props.onInp(ev.target.value);
}
render(){
return
}
}
//child-2
class Show extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <p>{this.props.onShow}</p>
}
}
//最后渲染出
ReactDOM.render(
以上是React元件之間的通訊的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
