React:将道具传递给后代 [英] React: Passing Props to Descendants

问题描述

是否有推荐的模式将 props 传递给 React 中的后代组件?

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

Master = React.createClass({渲染:函数(){返回 (<div><ListComp items={this.props.items} callback={this.handleClick}/>

);}});ListComp = React.createClass({渲染:函数(){this.props.items.forEach(function(item) {items.push(<ItemView item={item} callback={this.props.callback}/>);}， 这);返回 (<ul>{items}</ul>);}});

然后将 callback 属性传递给后代组件:

ItemComp = React.createClass({渲染:函数(){返回 (<li><a onClick={this.handleClick} href="#">Link</a></li>);},句柄点击:函数(e){e.preventDefault();this.props.callback();}});

像这样将 prop 传递两次是否正确，或者我应该以某种方式引用它的继承?

我在文档中看到了一个 transferPropsTo 方法，从记录来看，我似乎可以通过 this.props.__owner__ 从后代那里获得 callback.props 但那些双双下划线让我觉得我不应该.

解决方案

是的，这是惯用的.将每个组件视为一个函数，其参数是 props——从这个角度来看，明确地传递 props 似乎更正常.我们发现，让所有内容都显式更易于维护，这样您就可以查看组件的所有输入内容以及您传递的内容.

(React 的未来版本可能会包含一个名为上下文"的特性，这使得隐式传递成为可能，但它可能会使代码更难以推理，所以我几乎一直都喜欢显式.)

更新(不是原作者)

终于添加了文档(它是在 2015 年夏季到 2016 年夏季之间的某个时间添加的，可能是 0.14 版):

官方 React 上下文文档.

请注意，这也是 react-redux 的简化方式通过层次结构传递商店.

Is there a recommended pattern for passing props to descendant components in React?

Below, I'm passing the prop callback to a child component:

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>
    );
  }
});

And then the callback prop gets handed down to the descendant component:

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

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

Is it correct to pass the prop down twice like this or should I be referencing its inheritance somehow?

I see a transferPropsTo method in the docs, and from logging it looks like I could get to callback from the descendant via this.props.__owner__.props but those double-double underscores make me think I shouldn't.

解决方案

Yes, this is idiomatic. Think of each component as a function whose arguments are the props – with that perspective, passing around the props explicitly seems a lot more normal. We've found that it makes things more maintainable to have everything be explicit so you can see what all the inputs to a component are and exactly what you're passing.

(A future version of React will probably include a feature called "contexts" which makes it possible to pass things down implicitly, but it will probably make code harder to reason about so I'd still favor explicitness almost all of the time.)

UPDATE (not by original author)

The documentation has finally been added (it was added sometime between summer 2015 and summer 2016, probably with release 0.14):

Official React Context Documentation.

Note that this is also how react-redux simplifies passing of stores through the hierarchy.

这篇关于React:将道具传递给后代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！