当我与孩子一起工作时，如何省略`React.Fragment`？

Question

我正在使用简单的反应元素结构：

...
<ComponentWrapper>
  <FirstComponent />
  <SecondComponent />
  <ThirdComponent />
</ComponentWrapper>
...

在我的ComponentWrapper中，我想与所有孩子一起工作，但在我的FirstComponent中，我有这样一个结构：

const FirstComponent = () => {
  return <>
   <Subcomponent />  
   <Subcomponent />
   <Subcomponent />
  </>

因此，在ComponentWrapper的这个结构中，我只有 3 个孩子，但实际上我必须从FirstComponent获得 5 个孩子，从第二个和第三个组件获得 2 个孩子。

可能有人知道如何省略React.Fragment并从第一个组件中获得 3 个孩子？

Answer 1

您可以将要在Firstcomponent中呈现的任何组件添加到数组中。 然后返回该数组，就像这样

export default function FirstComponent () {
  const x = [];
  x.push(<p>Hello</p>);
  x.push(<p>Hello</p>);
  x.push(<Subcomponent/>);
  x.push(<Subcomponent/>);

  return x;
}

或者不是将它们推入数组然后返回数组，而是直接像这样返回它

return [
    <p>Hello</p>,
    <p>Hello</p>,
    <Subcomponent/>,
    <Subcomponent/>
  ]

您可能还必须为每个元素提供一个关键道具。 另请注意，使用反应片段总是更好。 反应文档有一个部分提到了这一点： link