Apakah penggantian jenis pulangan yang betul untuk JSX.Element apabila ruang nama JSX global ditamatkan?

Question

Ruang nama @types/react 中，全局 JSX ditamatkan:

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

Memandangkan saya mendayakan ESLint's deprecation/deprecation 规则（来自插件 eslint-plugin-deprecation), saya kini mendapat ralat untuk jenis pengembalian komponen fungsi seperti ini:

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

Sejak global JSX 命名空间已被弃用，那么在这种情况下 JSX.Element apakah penggantian jenis pulangan yang betul?

Adakah React.JSX.Element seperti yang dinyatakan dalam mesej penamatan:

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

atau ReactElement seperti ini:

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

Atau lebih baik lagi, isytiharkan komponen fungsi menggunakan React.FC dan biarkan TypeScript membuat kesimpulan jenis pulangan, seperti ini:

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

Answer 1

Gunakan React.JSX.

---

atau daripada "react" 导入 JSX:

import {JSX} from 'react'

Answer 2

Guna terus 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)
        </>
  );
}

Ini betul-betul (tidak disyorkan lagi)React.FC Penguatkuasaan:

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

Ia juga 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

---

Sebenarnya, melainkan anda mempunyai beberapa peraturan yang memaksa anda memasukkan jenis pengembalian komponen fungsi, anda boleh mengabaikannya demi kesederhanaan:

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

Nampaknya fungsi itu kini boleh mengembalikan apa-apa dan Typescript tidak akan merungut...melainkan anda cuba menggunakannya sebagai komponen berfungsi dalam templat JSX, seperti yang dinyatakan dalam fb/cra#8177:

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