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

Question

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

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

原来我没有创建这个组件，它来自一个外部依赖，但我想在传递相同道具的不同地方使用这个组件，为此我想到了一个 ParentComponent 来包装 Component。 我以前这样做过，只要被包裹的组件不包围像这样的其他组件，它就可以工作。 我怎样才能做到这一点？ 提前致谢

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>