依赖注入 - 将子组件作为道具传递给父组件

Question

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

const Clazz = React.createClass({

   render: function(){

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

假设我要渲染这个组件，并像这样传递两个子组件：

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

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


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

如您所见，我想通过 props 将子组件传递给组件 C。我从来没有理解过 - 这与使用 this.props.children 有什么不同吗？我在这里所做的是否足够好？ 将孩子作为道具传递的惯用方式是什么，这与： this.props.children 有什么关系？几个月后，我仍然不明白this.props.children 的含义。我假设 this.props.children 是由 React 设置的，并且我不应该设置该值，但我不确定。

Answer 1

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

子元素是你在 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

最后：一切都“编译”为函数。 如果您的组件就像一个工厂，您事先无法知道将要渲染什么，那么将组件作为 props 传递是有意义的。

但如果你只是想“喂”一些将通过其父渲染方法显示的内容，那么使用子级更合适。

如果你使用过它，它类似于 Angular 的“transclude”。

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

添加备注
更准确地说，React.createElement 可以传递三个以上的参数。但是，从第三个开始，他们就是孩子了。

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

Answer 2

你可以像这样直接传递孩子：

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