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

如你所见，我想通过道具传递组件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

最后：一切都“编译”到了函数中。将组件作为道具传递是有意义的，如果你的组件就像一个工厂，你无法知道将在那里呈现什么。

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

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

孩子永远是React元素，而道具可以是任何东西。一般来说，我认为人们会期望孩子们按照提供的方式进行渲染，而道具会有明确定义的行为影响内容输出。

添加了注释
更确切地说，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'));

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

2 个答案: