Javascript 为什么此返回代码无效？（条件渲染）

我想了解为什么此代码的编译版本无效

<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&&(
{hasTopCollection&&}
//(二)预期
{list.listOptions.brandHeaderType==20&&}
//^分析错误：意外标记，应为“，”
)}

我在父组件中有这个

listData.list.description&

组件，但现在我想将这个逻辑移到实际的

组件中

所以在这之前是这样的,

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

{hasTopCollection&&}
{list.listOptions.brandHeaderType==20&&}
这个
现在只有一个孩子，所以它不是真正需要的。然而，在括号内有两件事。仅括号不足以对子项进行分组，因此可以使用
来代替它们：

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

{listData.list.description&&
{hasTopCollection&&}
{list.listOptions.brandHeaderType==20&&}
}
@DedaDev事实上，该片段用于对多个组件进行分组。事实上，你是对的。我认为它是双卷发，卷发中不能有卷发，括号作为一个新组件。