在 React 中为父组件提供状态

Question

我知道你可以在 React 中将状态和 props 从父组件传递到子组件，但是有没有办法以相反的方式做到这一点？

例如：

给定一些子组件：

var Child = React.createClass({
  getInitialState: function(){
    return {
      data: ''
    };
  },
  componentDidMount: function(){
    this.setState({data: 'something'});
  },
  render: function() {
    return (
      <div>
        ...
      </div>
    );
  }
});

并给定一些父组件：

var Parent = React.createClass({
  render: function() {
    return (
      <div>
        <Child />
        ...
      </div>
    );
  }
});

我有什么办法可以Parent Child的状态数据的值？

Answer 1

No.

但是是的。但真的没有。

你不能在 React 中将任何东西从孩子"传递"给父母。但是，有两种解决方案可用于模拟此类传递。

1( 将父级的回调传递给子级

var Parent = React.createClass({
  getInitialState: function() {
    return {
      names: []
    };
  },
  addName: function(name) {
    this.setState({
      names: this.state.names.push(name)
    });
  },
  render: function() {
    return (
      <Child 
        addName={this.addName}
      />
    );
  }
});
var Child = React.createClass({
  props: {
    addName: React.PropTypes.func.isRequired
  },
  handleAddName: function(event) {
    // This is a mock
    event.preventDefault();
    var name = event.target.value;
    this.props.addName(name);
  },
  render: function() {
    return (
      ...
        onClick={this.handleAddName}
      ...
    );
  }
});

第二个选项是使用 Flux 样式的操作/存储系统(如 Reflux 或 Redux(来获得顶级状态。这些基本上与上述相同，但更抽象，使得在更大的应用程序上执行此操作非常容易。

Answer 2

一种方法是通过我最近介绍的"渲染道具"模式。请记住，this.props.children实际上只是 React 将内容传递给组件的一种方式。

对于您的示例：

var Parent = React.createClass({
  render: function() {
    return (
      <div>
        <Child>
          {(childState) => {
             // render other 'grandchildren' here
          }}
        </Child>
      </div>
    );
  }
});

然后在<Child>渲染方法中：

var Child = React.createClass({
  propTypes: {
    children: React.PropTypes.func.isRequired
  },
  // etc
  render () {
    return this.props.children(this.state);
  }
});

这可能最适合以下情况：<Child />负责做某事，但根本不关心将要代替它的孩子。反应训练人员使用的示例是针对一个将从 Github API 获取的组件，但允许父级真正控制用这些结果渲染的内容/如果有任何内容。