Quel est le remplacement correct du type de retour pour JSX.Element lorsque l'espace de noms JSX global est obsolète ?

Question

L'espace de noms @types/react 中，全局 JSX est obsolète :

declare global {
    /**
     * @deprecated Use `React.JSX` instead of the global `JSX` namespace.
     */
    namespace JSX {
    ...
    }
}

Depuis que j'ai activé ESLint deprecation/deprecation 规则（来自插件 eslint-plugin-deprecation), je reçois maintenant une erreur pour le type de retour du composant de fonction comme ceci :

export default function TestComponent(): JSX.Element { // This JSX is marked as deprecated
    return (
        <span>Test</span>
    );
}

Depuis global JSX 命名空间已被弃用，那么在这种情况下 JSX.Element quel est le remplacement correct du type de retour ?

Est-ce React.JSX.Element comme indiqué dans le message de dépréciation :

export default function TestComponent(): React.JSX.Element { ... }

ou ReactElement comme ceci :

import { ReactElement } from "react";
export default function TestComponent(): ReactElement { ... }

Ou mieux encore, déclarez le composant fonction en utilisant React.FC et laissez TypeScript déduire le type de retour, comme ceci :

export const TestComponent: React.FC = () => { ... };

Answer 1

Utilisez React.JSX.

---

ou de "react" 导入 JSX :

import {JSX} from 'react'

Answer 2

Utilisez directement React.ReactElement（或者更准确地说，React.ReactElement | null):

import { ReactElement } from "react";

export function TestComponent(): ReactElement | null {
  return (
    Math.random() < 0.5
      ? null
      : <>
          A single Element (could be a Fragment like here)
        </>
  );
}

C'est exactement ce que c'est (plus recommandé)React.FC Application :

interface FunctionComponent<P = {}> {
  (props: P, context?: any): ReactElement<any, any> | null;
  // ...
}

C'est aussi JSXElementConstructor :

type JSXElementConstructor<P> =
  | ((props: P) => ReactElement<any, any> | null) // Case of a Function Component
  | (new (props: P) => Component<any, any>); // Case of a Class-based Component

---

Cela étant dit, à moins que certaines règles vous obligent à saisir les types de retour des composants de fonction, vous pouvez l'ignorer par souci de simplicité :

export function TestComponent() {
  // ...
}

Apparemment, la fonction peut désormais renvoyer n'importe quoi et Typescript ne se plaindra pas... à moins que vous n'essayiez de l'utiliser comme composant fonctionnel dans un modèle JSX, comme indiqué dans fb/cra#8177 :

const Example = () => <Component />; // Error here, due to Component returning the wrong thing