本篇文章主要介紹了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中,並在視圖層進行綁定。
第一步先綁定9304e6782376319895a69f5eee4dd6e2元件
//在父层中的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> }
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}/> } }
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(, document.getElementById('app') );
以上是React元件之間的通訊的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!