如何包装一个可以包装其他组件的组件？

Question

说我有一个组件，可以有这样的子组件

<Component>
    <Child/>
    <Child/>
</Component>

原来我没有创建此组件，它来自外部依赖关系，但是我想在各个地方使用该组件并传递相同的道具，因为我想到了ParentComponent来包装该组件。我之前已经做过，只要包裹的组件不会包围其他类似组件，它就可以工作。我怎样才能做到这一点？预先感谢

Answer 1

您可以使用React.Fragment来包装组件，但它不会出现在dom中

Answer 2

我相信您想要传递children道具，因此您可以创建以下元素

const Wrapper = ({children}) => (
  <Component>
    <Child/>
    <Child/>
    {children}
  </Component>
)

，然后将其用作

<Wrapper>
  <span>hi</span>
</Wrapper>

最终渲染的树将是

<Component>
  <Child/>
  <Child/>
  <span>hi</span>
</Component>