&& 逻辑运算符 jsx 和 typescript 错误

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>
      )}
    </>
  );