Maison > Questions et réponses > le corps du texte
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粉4652875922023-10-27 11:55:24
Utilisez React.JSX
.
ou de "react"
导入 JSX
:
import {JSX} from 'react'
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