TypeScript：它的返回类型'Element | undefined' 不是有效的 JSX 元素

Question

我有这个非常简单的 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”。

Answer 1

尝试用这个替换顶部组件。你永远不应该返回未定义的。 Undefined 是为一个值没有被赋值的时候保留的，你应该使用 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;