React組件實現越級傳遞屬性

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

如果把一個屬性，比如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}}/>
    }
}

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

直接上代碼：

// 一級父組件
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接受越級傳遞的參數****
    }
}
// ****第3步：定義子組件從組件需要接受的屬性和類型****
Level3.contextTypes = {
  color: React.PropTypes.string
};

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

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