為什么這個 React 返回碼無效？ （條件渲染）

Question

我想了解為什么這段代碼的編譯版本無效

<Fragment>
  {listData.list.description && (
    <div>
      <div dangerouslySetInnerHTML={{ __html: list.description }} />
      {hasTopCollection && <ImageAttribution />}
    </div> 
       // ^ ) expected
    {list.listOptions.brandHeaderType === 20 && <SomeComponent />}
 // ^ Parsing error: Unexpected token, expected ","
  )}
</Fragment>

我在父組件中有這個listData.list.description && <Description>組件，但現在我想將此邏輯移動到實際的<Description>組件中。

所以之前是這樣的：

<Fragment>
    <div>
      <div dangerouslySetInnerHTML={{ __html: list.description }} />
      {hasTopCollection && <ImageAttribution />}
    </div>
    {list.listOptions.brandHeaderType === 20 && <SomeComponent />}
</Fragment>

Answer 1

<Fragment>現在只有一個孩子，所以不需要它。 但是，在括號內你有兩件事。 單獨的括號不足以對孩子進行分組，因此可以在其中使用<Fragment>代替它們：

{listData.list.description &&
  <Fragment>
    <div>
      <div dangerouslySetInnerHTML={{ __html: list.description }} />
      {hasTopCollection && <ImageAttribution />}
    </div> 
    {list.listOptions.brandHeaderType === 20 && <SomeComponent />}
  </Fragment>}