React——context越级传值

我们都知道，在React中数据可以以流的形式自上而下的传递，当你使用组件的时候，你可以看到组件的props属性会自上而下传递。但是在有些情况下不想通过父组件的props属性一级一级的向下传递，而是希望在某一子级中直接得到上N级父组件的props中的值。那么接下来就让我们看一下通过props传值和context传值的情况

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）代码结构大致分为3级：顶层MessageList、Message一级子类和Button底层子类
（2）从父组件到子组件的传值情况——text：在顶层组件MessageList中的值，传递到一级子组件Message中，并在此组件中被使用{this.props.text}
（3）从父组件到子组件的传值情况——color：顶层组件MessageList中的值，先传递到一级子组件Message中，在传递到二级子组件Button中，最后在二级子组件中被使用{this.props.color}
（4）总结：从上边分析可以看出，通过props属性进行父子组件的传值是一级一级的向下传递的

2、通过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
};

过程解析：通过添加childContextTypes和getChildContext()到MessageList（context的提供者），React自动向下传递数据然后在组件树中的任意组件（也就是说任意子组件，在上面的例子中就是Button）都能通过定义contextTypes访问context中的数据。
（1）在顶层组件MessageList中定义了顶层组件所拥有的子类context对象——该顶层组件所拥有的子类context对象为color，且必须为字符串，代码如下：

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

（2）通过getChldText方法，来给子context对象的属性赋值，这样就完成了顶层组件中，context组件的赋值，代码如下：

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

（3）越级传递。因为color属性只在最底层使用（在一级子组件Message中并没有直接用到），因此可以直接传递到最底层（越级），在Button组件中使用。首先在Button组件中，再次说声明了所接受到的context的子组件color的类型，声明必须为字符串，代码如下：

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

（4）最后通过this.context.color这种方式调用，这样就通过Context实现了组件之间的越级传值，代码如下：

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

3、总结：指定数据并要将数据传递下去的父组件要定义childContextTypes和getChildContext()；想要接收到数据的子组件必须定义contextTypes来使用传递过来的context