React進階教程React中的Context

簡介：在React中，資料可以以流的形式自上而下的傳遞，每當你使用一個組件的時候，你可以看到組件的props屬性會自上而下的傳遞。但是，在某些情況下，我們不想通過父組件的props屬性一級一級的往下傳遞，我們希望在某一級子組件中，直接得到上N級父組件中props中的值。

1.一般情況下通過props傳值的情況

class Button extends React.Component {  render() {    return (      <button style={{background: this.props.color}}>        {this.props.children}      </button>    );  }}class Message extends React.Component {  render() {    return (      <div>        {this.props.text} <Button color={this.props.color}>Delete</Button>      </div>    );  }}class MessageList extends React.Component {  render() {    const color = "purple";    const children = this.props.messages.map((message) =>      <Message text={message.text} color={color} />    );    return <div>{children}</div>;  }}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

我們來分析一下這段代碼，大致的組件分為3級:

頂層MessageLists——>Message一級子類——>Button底層子類

我們來看從父組件到子組件的值的傳遞情況：

（1）text:

我們可以看到，在頂層組件MessageLists中的值，傳遞到一級子組件Message中，並在此組件中被使用。

（2）color:

再看props中的color的傳遞情況，在頂層組件MessageLists中的值，先傳遞到一級子組件Message中，

在傳遞到二級子組件Button中，最後在二級子組件中被使用。

綜上：這就是一般在React中，所使用的通過props屬性，在父組件與子組件中進行值傳遞。

2.如何利用React中的Context來進行值的越級傳遞。

class Button extends React.Component {  render() {    return (      <button style={{background: this.context.color}}>        {this.props.children}      </button>    );  }}Button.contextTypes = {  color: React.PropTypes.string};class Message extends React.Component {  render() {    return (      <div>        {this.props.text} <Button>Delete</Button>      </div>    );  }}class MessageList extends React.Component {  getChildContext() {    return {color: "purple"};  }  render() {    const children = this.props.messages.map((message) =>      <Message text={message.text} />    );    return <div>{children}</div>;  }}MessageList.childContextTypes = {  color: React.PropTypes.string};

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

上述代碼，我們實現了通過React的Context實現了值——color的越級傳遞。我們來分析一下上述的方法。

（1）首先在頂層組件中：

MessageList.childContextTypes = {  color: React.PropTypes.string};

1 2 3

定義了頂層組件所擁有的子類context對象——該頂層組件所擁有的的子類context對象為color，且必須為字串。

然後通過getChildText方法，來給子context對象的屬性賦值：

getChildContext() {    return {color: "purple"};  }

1 2 3 4 5

這樣就完成了頂層組件中，context對象的賦值。

（2）越級傳遞，因為color屬性只在最底層使用

我們來看color屬性的越級傳遞，因為color屬性，在一級子組件Message中並沒有直接用到，因此我們可以

直接傳遞到最底層（越級），在Button組件中使用。

首先Button組件中，再次聲明了所接受到的context的子組件color的類型，聲明必須為字串：

Button.contextTypes = {  color: React.PropTypes.string};

1 2 3

然後可以通過this.context.color這種方式調用：

 <button style={{background: this.context.color}}>        {this.props.children} </button>

1 2 3

綜上：這樣，我們發現通過Context，我們就能實現值得越級傳遞。