&& 逻辑运算符 jsx 和打字稿出错

Question

我对打字稿很陌生，我想知道为什么会失败

import {CircularProgress} from 'components/shared/material'

import React from 'react'

import loadingStyles from './styles'

const Loading = ({active}: {active: boolean}) => {
 const classes = loadingStyles({active, fadeSpeed: 1})
 return (
  active && (
   <div className={classes.overlay}>
    <CircularProgress />
   </div>
  )
 )
}

export default Loading

当我尝试在另一个组件中使用它时，我收到以下消息：

Loading' 不能用作 JSX 组件。 它的返回类型 'false | Element' 不是有效的 JSX 元素。 类型 'false' 不能分配给类型 'Element | 空值'。

这很奇怪，因为它可以与常规 js 一起使用，而这里在打字稿中只有在我使用这样的三元语句时才有效：

  return active ? (
   <div className={classes.overlay}>
    <CircularProgress />
   </div>
  ) : null

Answer 1

如果你真的想使用速记 - 你可以这样做。 <></> 的使用允许多行（在这种情况下是可选的）并确保函数上的单个元素返回。 将您的条件代码包裹在 {} 周围将确保您可以在其中添加任意数量的 && 检查来呈现您的组件。

  return (
    <>
      {active && (
        <div className={classes.overlay}>
          <CircularProgress />
        </div>
      )}
    </>
  );