如何從 React.FC 組件返回 null

Question

我對 ESLint 和 TypeScript 感到困惑。

我無法返回null因為ESLint: Use undefined而不是null .(unicorn/no-null)

好的，我不介意將null更改為undefined 。 現在我有更多錯誤

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

TS2322: 類型'({ testId, authType }: PropsWithChildren) => 元素 | undefined' 不可分配給類型 'FC'。 輸入'元素 | undefined' 不可分配給類型 'ReactElement<any, any> | 無效的'。 類型 'undefined' 不可分配給類型 'ReactElement<any, any> | 無效的'。

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;
  }
};

如何處理？

提前致謝！

Answer 1

我認為你應該關閉unicorn/no-null規則，React 組件不能返回 undefined。

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

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