Почему этот код возврата 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> компонент в родительском компоненте, но теперь я хочу переместить этот c logi в фактический <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>}

Answer 2

Вы можете вернуть только один дочерний компонент. Поэтому попробуйте обернуть ваши компоненты другим элементом, например, пустым <div>.

Например:

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