为什么这个 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>可以在此处使用 a 代替：

{listData.list.description &&

  <Fragment>

    <div>

      <div dangerouslySetInnerHTML={{ __html: list.description }} />

      {hasTopCollection && <ImageAttribution />}

    </div> 

    {list.listOptions.brandHeaderType === 20 && <SomeComponent />}

  </Fragment>}