最近學習淺嘗則止的學習了一下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( <div> <Input}/> <Show/> </div> ); } }現在的任務是在組件1總輸入一些文字，同時在組件2中同時顯示出來。
分析：要讓組件2與組件1同步，就讓組件1和2都去綁定父組件的狀態。也就是說讓兩個組件受控。數據的走向是，組件1將自身的數據提升到父層，并且保存在父層的狀態中。父層中的數據通過組件2中的props屬性傳遞到組件2中，并在視圖層進行綁定。
第一步先綁定<Show/>組件
//在父層中的constructor中定義狀態為一個空的message，this.state = {message:''}class Parent extends React.Component{ constructor(...args){ super(...args); this.state = { message:'' }然后在父組件中的<Show/>改為
<Show onShow={this.state.message}/>接著來我們進入到<Show/>組件中，給其內容綁定這個穿件來的onShow屬性。<Show/>組件變為
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( <div> /* onInp就出現在這里,并綁定一個函數, 并且有一個content將父組件的狀態同步到子組件中 */ <Input onInp={this.fn.bind(this)} content={this.state.message}/> <Show onShow={this.state.message}/> </div> ); } }寫完的代碼是這樣的
// 父組 class Parent extends React.Component{ constructor(...args){ super(...args); this.state = { message:'' }; } onInp(text){ this.setState({ message:text }) } render(){ return( <div> <Input onInp={this.onInp.bind(this)} content={this.state.message}/> <Show onShow={this.state.message}/> </div> ); } } //child-1 class Input extends React.Component{ constructor(...args){ super(...args); } fn(ev){ this.props.onInp(ev.target.value); } render(){ return <input type="text" onInput={this.fn.bind(this)} value={this.props.content}/> } } //child-2 class Show extends React.Component{ constructor(...args){ super(...args); } render(){ return <p>{this.props.onShow}</p> } } //最后渲染出 ReactDOM.render( <Parent/>, document.getElementById('app') );以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
