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

当我尝试在其他组件中使用它时，出现以下消息：

正在加载”不能用作JSX组件。其返回类型为'false |元素”不是有效的JSX元素。类型'false'不能分配给类型'Element |空”。

这很奇怪，因为它将与常规js一起使用，并且在typescript中，仅当我使用像这样的三元语句时才起作用：

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

Answer 1

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

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

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

1 个答案: