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方法，并且通过记录它看起来我可以通过callback从后代到达this.props.__owner__.props但是这些双重下划线让我想到我不应该。

Answer 1

是的，这是惯用的。将每个组件视为一个函数，其参数是道具 - 使用该透视图，明确地传递道具似乎更为正常。我们发现，让一切都变得清晰可以使事情更易于维护，这样你就可以看到组件的所有输入都是正确的，并且正是你传递的内容。

（React的未来版本可能会包含一个名为“contexts”的功能，它可以隐式地传递内容，但它可能会使代码难以推理，所以我几乎一直都喜欢显式。）

更新（不是原作者）

最后添加了文档（它在2015年夏季到2016年夏季之间添加，可能是0.14版本）：

Official React Context Documentation

请注意，这也是react-redux简化商店在层次结构中传递的方式。

反应：将道具传递给后代

1 个答案: