我是否正确使用ReactElement？函数式组件写法存疑

首先明确几个关键概念：

• 你写的是函数式React组件，不是元素。React组件分两种：函数式组件（你现在用的这种）和类组件（就是你看到带render方法的那种）。
• React元素是组件返回的JSX结果（比如<div>some content</div>或者你组件return里的内容），组件是生成元素的“工厂”。

关于返回类型：

• 标注React.ReactElement作为返回类型是完全正确的，它明确告诉TypeScript这个函数返回的是一个React元素。
• 其实TypeScript可以自动推断这个返回类型，你甚至可以省略不写，代码依然是类型安全的，比如：

  export const SomeComponent = (props: SomeComponentProps) => {
    return (
      <>
        <div>some content</div>
      </>
    )
  }
  

关于类组件的render方法：

• 带render的是类组件，属于React的旧写法，现在React官方更推荐用函数式组件配合Hooks来开发，你的写法是符合当前最佳实践的，完全没必要改成类组件。

总结：你的应用构建方式是正确的，所有函数式组件都可以用这种写法，返回类型标注React.ReactElement没问题，也可以选择省略。

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