當我與孩子一起工作時，如何省略`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