如何从 React.FC 组件返回 null答案

【问题标题】：How can I return null from React.FC component如何从 React.FC 组件返回 null
【发布时间】：2021-03-02 13:13:25
【问题描述】：

我对 ESLint 和 TypeScript 感到困惑。

我无法返回null，因为ESLint：使用undefined 而不是null。（unicorn/no-null）

好的，我不介意将null 更改为undefined。现在我有更多错误

ESLint：不要使用无用的undefined.(unicorn/no-useless-undefined) 和

TS2322: 类型 '({ testId, authType }: PropsWithChildren) => 元素 | undefined' 不可分配给类型 'FC'。输入'元素 | undefined' 不可分配给类型 'ReactElement |空值'。类型 'undefined' 不可分配给类型 'ReactElement |空'。

const AuthForm: React.FC<Props> = ({ testId = '', authType }) => {
  switch (authType) {
    case 'logIn':
      return <LogIn testId={testId} />;
    case 'changePass':
      return <ChangePass testId={testId} />;
    case 'newPass':
      return <NewPass testId={testId} newPassStatus="resetPass" />;
    default:
      return null;
  }
};

如何处理？

提前致谢！

【问题讨论】：

标签： javascript reactjs typescript eslint

【解决方案1】：

我认为你应该关闭unicorn/no-null 规则，React 组件不能返回 undefined。

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/25546

{
  "unicorn/no-null": "off",
}

【讨论】：