我对打字稿还很陌生,我想知道为什么会失败
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
如果你真的想使用速记 - 你可以这样做。使用 > 允许多行(在本例中是可选的)并确保函数返回单个元素。将条件代码包裹在 {} 周围将确保您可以在其中添加任意数量的 && 检查来渲染组件。
return (
<>
{active && (
<div className={classes.overlay}>
<CircularProgress />
</div>
)}
</>
);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)