全局JSX命名空间弃用后，JSX.Element的正确替代返回类型是什么？

针对全局JSX命名空间被弃用后触发的ESLint报错，以下是几种可行的替代方案，各有适用场景：

1. 使用官方推荐的React.JSX.Element #

这是弃用提示中明确指定的替代方式，完全匹配原JSX.Element的类型定义，能直接解决弃用报错：

import React from 'react';

export default function TestComponent(): React.JSX.Element {
  return <span>Test</span>;
}

2. 导入ReactElement作为返回类型 #

ReactElement与React.JSX.Element在类型上完全等价，写法更简洁，同样能满足类型约束需求：

import React, { ReactElement } from 'react';

export default function TestComponent(): ReactElement {
  return <span>Test</span>;
}

3. 用React.FC让TypeScript自动推断返回类型 #

使用React.FC（或React.FunctionComponent）声明组件时，TypeScript会自动推断返回类型为ReactElement | null，无需手动指定：

import React from 'react';

const TestComponent: React.FC = () => {
  return <span>Test</span>;
};

export default TestComponent;

注意：React.FC会隐式添加children属性，如果组件不需要接收children，可以通过React.FC<{}>显式移除默认的children类型。

总结 #

三种方案均有效，优先推荐**React.JSX.Element（符合官方指引）或ReactElement**（简洁直观）；若团队习惯使用组件类型声明，React.FC也是合适的选择，可根据编码规范和个人偏好决定。

内容的提问来源于stack exchange，提问作者sceee