Как условно отрисовать компонент в React + TypeScript

Question

Обновление

Возможно, решение заключается в том, как я объявляю компонент:

import React, { FunctionComponent } from 'react';

export const ChapterDescription: FunctionComponent<
    ChapterDescription
   > = (
   {
    description,
    name,
   }: ChapterDescription,
   ) => (
   <div>
     <h3>{name}</h3>
     <p>{description}</p>
   </div>
 );

Когда я использовал только reactjs для своих компонентов, я мог легко сделать условно рендеринг такого компонента (проверьте, есть ли в массиве chapters элементы и только , затем визуализируйте компонент):

<OtherComponent/>    
    <div>
        {chapters.length > 0 && <ChapterDescription
            name={name}
            description={description}
        />}
    </div>
<OtherComponent2 />

Когда я пытаюсь это сделать, в машинописном тексте появляется ошибка:

Type 'false | Element' is not assignable to type 'Element'.
  Type 'false' is not assignable to type 'Element'.ts(2322)

Условный рендеринг - это уже плохая практика? Как мне поступить с этим делом?

Answer 1

Ну это не так очевидно, но фрагменты - это решение для условного рендеринга в машинописном тексте или одно из решений:

Теперь он не жалуется :

<Acomponent />
 <>
   {chapters && chapters.length > 0 && (
     <ChapterDescription
       name={selectedChapter.name}
       description={selectedChapter.description}
     />
   )}
 </>
<AnotherComponent />

источник: https://en.reactjs.org/docs/fragments.html

Answer 2

Попробуйте вместо этого использовать тернарный оператор, так вы либо используете компонент, либо null:

<OtherComponent/>    
    <div>
        {chapters.length > 0 ? <ChapterDescription
            name={name}
            description={description}
        /> : null}
    </div>
<OtherComponent2 />