我如何使用 ReactElement 类型答案

【问题标题】：How do I use ReactElement type我如何使用 ReactElement 类型
【发布时间】：2022-12-18 05:00:32
【问题描述】：

我正在研究将 Typescript 与 React 结合使用，我遇到了类型“ReactElement”，它的定义是：

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key: Key | null;
}

因为我们可以指定我们希望 ReactElement 返回的道具类型，所以我认为以下代码应该会导致错误：

type HeadingProps = {
    text : string,
}

const Heading = (props: HeadingProps): ReactElement<{}, any> => {
    return <h1>{props.text}</h1>
}

export default Heading

我传入了通用的空对象，所以我预计会出现错误，但它仍然可以正常工作，我是做错了什么还是没有理解“ReactElement”的要点？

【问题讨论】：

标签： reactjs typescript react-typescript tsx

【解决方案1】：

你可以使用 React.FC 轻松输入，看起来更干净

type HeadingProps = {
    text : string,
}

const Heading: React.FC<HeadingProps> = (props) => {
    return <h1>{props.text}</h1>
}

导出默认标题

【讨论】：