如果有這樣一個(gè)結(jié)構(gòu)：三級嵌套，分別是：一級父組件、二級子組件、三級孫子組件，且前者包含后者，結(jié)構(gòu)如圖：

如果把一個(gè)屬性，比如color，從一級傳遞給三級，一般做法是使用props逐一向下傳遞，代碼如下：

// 一級父組件 class Level1 extends React.Component{render(){return <Level2 color='red'/> } } // 二級子組件 class Level2 extends React.Component{render(){return <Level3 color={this.props.color}/> } } // 三級孫子組件 class Level3 extends React.Component{render(){return <div color={{color: this.props.color}}/> } }

看代碼會發(fā)現(xiàn)，level2根本沒有用到color，但是為了在level3中使用，它還是不得不寫上color={this.props.color}。一是代碼冗余，二是如果后期把color改成txt或者增加一個(gè)屬性，改起來復(fù)雜。那么如何把color直接從level1給level3呢？答案是：使用偉大的Context實(shí)現(xiàn)越級傳遞。

直接上代碼：

// 一級父組件 class Level1 extends React.Component{// ****第2步：給子類共用屬性賦值**** getChildContext() {return {color: "red"};}render(){return <Level2/> } } // ****第1步：定義子類們共用的屬性及類型**** Level1.childContextTypes = {color: React.PropTypes.string };// 二級子組件 class Level2 extends React.Component{render(){return <Level3/> } } // 三級孫子組件 class Level3 extends React.Component{render(){return <div color={{color: this.context.color}}/> // ****第4步：使用this.context接受越級傳遞的參數(shù)****} } // ****第3步：定義子組件從組件需要接受的屬性和類型**** Level3.contextTypes = {color: React.PropTypes.string };

每一步的說明，也都在備注里了，這里就不再一一解讀了。

另外，在React Redux中，Provider組件通過context方式把store傳遞給所有容器和子組件的方式，底層也是利用了這個(gè)原理。

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的React组件实现越级传递属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。