离线下载
PDF版 ePub版

极客学院团队出品 · 更新于 2018-11-28 11:00:42

组件间的通信

对于 父-子 通信,直接 pass props.

对于 子-父 通信: 例如: GroceryList 组件有一些通过数组生成的子节点。当这些节点被点击的时候,你想要展示这个节点的名字:

var GroceryList = React.createClass({
  handleClick: function(i) {
    console.log('You clicked: ' + this.props.items[i]);
  },

  render: function() {
    return (
      <div>
        {this.props.items.map(function(item, i) {
          return (
            <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
          );
        }, this)}
      </div>
    );
  }
});

React.render(
  <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
);

注意 bind(this, arg1, arg2, ...) 的使用: 我们通过它向 handleClick 传递参数。 这不是 React 的新概念,而是 JavaScript 的。

对于没有 父-子 关系的组件间的通信,你可以设置你自己的全局时间系统。 在 componentDidMount() 里订阅事件,在 componentWillUnmount() 里退订,然后在事件回调里调用 setState()