反应:将道具传递给后代

Question

是否有推荐的模式在React中将道具传递给后代组件？

下面,我将道具callback传递给子组件:

Master = React.createClass({
  render: function() {
    return (
      <div>
        <ListComp items={this.props.items} callback={this.handleClick} />
      </div>
    );
  }
});

ListComp = React.createClass({
  render: function() {

    this.props.items.forEach(function(item) {
      items.push(<ItemView item={item} callback={this.props.callback} />);
    }, this);

    return (
      <ul>{items}</ul>
    );
  }
});

然后callback道具传递给后代组件:

ItemComp = React.createClass({
  render: function() {
    return (
      <li><a onClick={this.handleClick} href="#">Link</a></li>
    );
  },

  handleClick: function(e) {
    e.preventDefault();
    this.props.callback();
  }
});

将支柱两次传递给这样是正确的还是我应该以某种方式引用它的继承？

我transferPropsTo在docs中看到了一个方法,并且通过记录它看起来我可以callback从后代通过this.props.__owner__.props但是那些双重下划线让我认为我不应该.

Answer 1

是的,这是惯用的.将每个组件视为一个函数,其参数是道具 - 使用该透视图,明确地传递道具似乎更为正常.我们发现,使一切都明确,使得事情更易于维护,以便您可以看到组件的所有输入以及您正在传递的内容.

(React的未来版本可能会包含一个名为"contexts"的功能,它可以隐式地传递内容,但它可能会使代码更难以推理,所以我几乎一直都喜欢显式.)

更新(不是原作者)

文档最终被添加(它在2015年夏季到2016年夏季之间的某个时间添加,可能是0.14版本):

官方反应上下文文档.

请注意,这也是如何react-redux简化商店在层次结构中的传递.