将react组件用作子组件或从React组件的render函数中使用

Question

有时候，我们在react组件的render函数中使用React组件，如下所示：

render() {
  return(
    <div>
      ...
      <MYReactComponent/>
      ...
    </div>
  )
}

有时候，我可以将react组件用作另一个组件的子组件，例如：

<ParentReactComp>
     ...
     <MYReactComponent/>
    ...

</ParentReactComp>

一种方法比另一种方法有什么优势？

Answer 1

直接在reander函数中添加组件时，您会在添加组件的确切位置上获得该组件。

但是当您使用它时，

<ParentReactComp>
    ...
     <MYReactComponent/>
    ...

</ParentReactComp>

在您的ParentReactComp组件中，您需要使用

显式添加子组件。

{this.props.children}

Demo

Answer 2

在render中声明单个组件可以让您使用props调用简单的react组件。

<div>
 ...
 <MYReactComponent/>
 ...
</div>

您希望在需要时将组件包装在“父组件”中

<ParentReactComp>
     ...
     <MYReactComponent/>
    ...

</ParentReactComp>

1）包装html

2）将一些数据传递到MyReactComponent进行合成，或将其用作容器。

3）您可能希望使用MyReactComponent在ParentReactComp中获得{this.prop.children}。

最后两个都是反应组件，您可以根据需要将一个组件封装到另一个组件中。

希望有帮助！