javascript - TypeScript:它的返回类型'Element | undefined' 不是有效的 JSX 元素
问题描述
我有这个非常简单的 ProviderAlert 组件。它根据从父级传递的道具呈现警报。
JSX.Element | undefined => {
return (alertIsOpen ? (
<Alert status={alertStatus} w="80%" style={alertStyle}>
<AlertIcon />
{title}
<CloseButton
position="absolute"
right="8px"
top="8px"
onClick={(): void => {
setAlertIsOpen(false)
}}
/>
</Alert>
) : undefined)
我尝试在父级的 return 语句中添加括号,但它不起作用。这是我如何在父组件中呈现不同警报的示例:
{credentialsModalIsOpen && (
<ProviderAlert
title="Connection Successful!"
alertStatus="success"
alertIsOpen={true}
setAlertIsOpen={(): void => setCredentialsModalIsOpen(false)}
/>
)}
我也尝试在 ProviderAlert 组件中更改undefined
为。null
它有效,但 linter 迫使我“使用 undefined 而不是 null”。
解决方案
尝试用这个替换顶部组件。你永远不应该返回未定义的。当一个值没有被赋予一个值时,未定义是保留的,你应该使用 null。
interface Props {
title: string;
alertStatus: string;
alertIsOpen: boolean;
setAlertIsOpen: () => void;
}
const ProviderAlert: React.FC<Props> = (props) => {
if (!alertIsOpen) {
return null;
}
return (
<Alert status={alertStatus} w="80%" style={alertStyle}>
<AlertIcon />
{title}
<CloseButton
position="absolute"
right="8px"
top="8px"
onClick={(): void => setAlertIsOpen(false)} />
</Alert>
);
}
export default ProviderAlert;
推荐阅读
- android - 如何控制 ValueAnimator 的更新速度
- javascript - 如何在 webdriverIO 中突出显示 WebElement?
- redis - Redis 中的单独列表
- javascript - 在现有元素旁边放置一个新元素
- javascript - 快速响应空无键
- c# - UWP:开始菜单磁贴文本颜色
- swift - 语音识别开始并立即失败,出现 kAFAssistantErrorDomain 错误 7
- r - 总结百分比计算无效的“类型”错误
- python - 使用令牌认证和 functools.wraps 构建装饰器
- typescript - 从匿名泛型函数的预期参数中提取类型