如何在 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 />