依赖注入 - 将 child 组件作为 props 传递给 parent 组件

Question

我正在尝试确定 idiomatic/canonical 将 child 组件作为 parent 组件的道具传递的方法。我找不到这方面的好例子，并且正在努力确定这是否与 this.props.children 有关。假设我有一个像这样的简单 React 组件：

const Clazz = React.createClass({

   render: function(){

      return (
          <this.props.A/>
          <this.props.B/>
          {this.props.children}
       )
   }
});

假设我要渲染这个组件，然后像这样传递两个 child 组件：

const A = React.createClass({
     render: () => 'a';
})

const B = React.createClass({
     render: () => 'b';
})


ReactDOM.render(<Clazz A={A} B={B} />, document.getElementById('root'));

如您所见，我想通过 props 传递组件 C 的 children。我一直不明白的是 - 这与使用 this.props.children 有什么不同吗？我在这里所做的是否足够好？ 传递 children 作为 props 的惯用方式是什么，这与以下内容有什么关系： this.props.children？几个月后，我仍然不明白 this.props.children 是什么意思。我假设 this.props.children 是由 React 设置的，我不是应该设置那个值，但我不确定。

Answer 1

你可以像这样直接传递children:

 ReactDOM.render( <Clazz>
        {A}
        {B}
    </Clazz>, document.getElementById('root'))

并在 Clazz 渲染方法中访问/渲染它们，如下所示：

render: function(){
  return (
      {this.props.children}
  )
}

所以完整的示例如下所示：

const Clazz = React.createClass({
  render: function(){
    return (
        {this.props.children}
     )
  }
});

const A = React.createClass({
  render: () => 'a';
})

const B = React.createClass({
  render: () => 'b';
})


ReactDOM.render(<Clazz>{A}{B}</Clazz>, document.getElementById('root'));

Answer 2

当你使用 JSX 时，你只是在 React.createElement 上使用了一些语法糖。

Children 是嵌套在 JSX 组件标签中的内容，它转换为 React.createElement.

的第三个参数

React.createElement(
  type,
  [props],
  [...children]
)

所以这个 JSX：

<Clazz A={A} B={B}>
  'Hello'
</Clazz>

将翻译为：

const element = React.createElement(
  'Clazz',
  {A: A, B: B},
  'Hello'
);

props.children有时是数组，有时不是。因此，React 有一些实用程序可以与它们一起工作。此处有更多详细信息：https://facebook.github.io/react/docs/react-api.html#react.children

最后：一切都是 "compiled" 的功能。如果你的组件就像一个你无法事先知道将要渲染什么的工厂，那么将组件作为 props 传递是有意义的。

但是，如果您只是想 "feed" 一些将通过其 parent render 方法显示的内容，那么使用 children 更为合适。

它类似于 Angular 的 "transclude" 如果您使用过它。

Children 永远是 React 元素，而 props 可以是任何东西。总的来说，我认为人们会期望 children 按照提供的方式呈现，而道具将具有影响内容输出的明确定义的行为。

添加注释
更确切地说，React.createElement 可以传递三个以上的参数。但是，从第三个开始，他们就是children.

您可以查看 this example where there is more than one child in JSX / React.createElement 与 Babel repl.

依赖注入 - 将 child 组件作为 props 传递给 parent 组件

Dependency injection - Passing child components as props to parent component

reactjs

react-dom