时间戳

首页 > 解决方案 > && 逻辑运算符 jsx 和打字稿出错

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

问题描述

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

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 一起使用，并且在 typescript 中只有在我使用像这样的三元语句时才有效：

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

标签： reactjstypescriptjsx

解决方案

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

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

推荐阅读