React 中 context 的使用

发布时间:2019-06-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React 中 context 的使用脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

引自个人博客 [走啊走的记录] - React 中 context 的使用

官方文档说明(英)

看了别人写的中文博客,再看了官方英文文档,发现还是官方文档讲的浅显易懂一些,看了之后,翻译半理解地写了这篇博客,更易于新手理解。

介绍

context 是在 react @ 0.14 版本以后发布的一个高级且实验性的功能,有可能在未来做出更改。不推荐频繁使用,如果使用的话尽量保持在小范围内并且避免直接使用 contextAPI,为了以后升级框架更加容易。

使用 Context 的原因

为了有时候想传递数据通过组件树,但是不想给每一层级的组件手动传递属性,那么 context 就能帮你 "越级" 传递数据到组件树中你想传递到的深层次组件。

有时候 A组件 为了给 B组件 中的 C组件 传递一个 PRop ,而需要把参数在组件中传递两次才能最终将 A组件 中的 prop 传递给 C组件

官方文档的示例代码如下

var Button = React.createClass({
  render: function() {
    return (
      <button style={{background: this.props.color}}>
        {this.props.children}
      </button>
    );
  }
});

var Message = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.text} <Button color={this.props.color}>Delete</Button>
      </div>
    );
  }
});

var MessageList = React.createClass({
  render: function() {
    var color = "purple";
    var children = this.props.messages.map(function(message) {
      return <Message text={message.text} color={color} />;
    });
    return <div>{children}</div>;
  }
});

使用 context 改进数据传递

现在我们使用 context 来完成参数的传递试试

var Button = React.createClass({
  // 必须指定context的数据类型
  contextTypes: {
    color: React.PropTypes.string
  },
  render: function() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
});

var Message = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
});

var MessageList = React.createClass({
  //
  childContextTypes: {
    color: React.PropTypes.string
  },
  getChildContext: function() {
    return {color: "purple"};
  },
  render: function() {
    var children = this.props.messages.map(function(message) {
      return <Message text={message.text} />;
    });
    return <div>{children}</div>;
  }
});

示例代码中通过添加 childContextTypesgetChildContext()MessageListcontext 的提供者),React 自动向下传递数据然后在组件树中的任意组件(也就是说任意子组件,在此示例代码中也就是 Button)都能通过定义 contextTypes 访问 context 中的数据。

总结

指定数据并要将数据传递下去的父组件要定义 childContextTypesgetChildContext();想要接收到数据的子组件 必须定义 contextTypes 来使用传递过来的 context

脚本宝典总结

以上是脚本宝典为你收集整理的React 中 context 的使用全部内容,希望文章能够帮你解决React 中 context 的使用所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。