Maison  >  Questions et réponses  >  le corps du texte

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

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 = () => { ... };


P粉404539732P粉404539732380 Il y a quelques jours716

répondre à tous(2)je répondrai

  • P粉465287592

    P粉4652875922023-10-27 11:55:24

    Utilisez React.JSX.


    ou de "react" 导入 JSX :

    import {JSX} from 'react'
    

    répondre
    0
  • P粉521748211

    P粉5217482112023-10-27 00:02:44

    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

    répondre
    0
  • Annulerrépondre