Question

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

例如：

给出一些子组件：

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

没有

但是是的。但是真的没有。

你不能在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获取的组件，但是允许父级真正控制用这些结果呈现的内容。

在React中将状态赋予父组件

2 个答案: