React组件间信息传递方式

组件之间传递信息方式，总体可分为以下5种：

1.（父组件）向（子组件）传递信息

2.（父组件）向更深层的（子组件） 进行传递信息  >>利用（context）

3.（子组件）向（父组件）传递信息

4.没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）

5.利用react-redux进行组件之间的状态信息共享

 一.（父组件）向（子组件）传递信息 >>>主要是通过 prop进行传值

        来看下面的例子

<span style="font-size:18px;">//父组件
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: false
    };
  },
  render: function() {
    return (
      <ToggleButton text="Toggle me" checked={this.state.checked} />
    );
  }
});

// 子组件
var ToggleButton = React.createClass({
  render: function () {
    // 从（父组件）获取的值
    var checked = this.props.checked,
        text = this.props.text;

    return (
        <label>{text}: <input type="checkbox" checked={checked} /></label>
    );
  }
});</span>

以上这个例子，子组件通过 prop拿到了text值以及checked的属性值；那么当子组件要拿到祖父级组件的信息，也是可以通过prop进行逐层的获取。来看下下面的例子。

官方文档的示例代码如下:

       

<span style="font-size:18px;">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>;
 }
});</span>
<span style="font-size:18px;">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 和 getChildContext()
  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>;
  }
});</span>