typescript 如何使用ReactElement类型

ldioqlga 于 2022-12-14 发布在 TypeScript

关注(0)|答案(1)|浏览(206)

我正在研究将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”的要点？

typescript

来源：https://stackoverflow.com/questions/74721802/how-do-i-use-reactelement-type

1条答案

按热度按时间

nwwlzxa71#

您需要创建一个接口来指定变量可以接收哪些数据，例如：

interface ButtonProps {
     color?: 'green' | 'blue' | 'sky'
     text: string
}

export default function Button(props: ButtonProps)

在上面的这个例子中，我指定了我的按钮组件的属性将是这些类型，例如颜色，因为前面有一个？：它是一个可以传递也可以不传递的属性，它是可选的，文本属性是必须传递的，我没有在里面放？，你必须在里面传递一个字符串参数。
希望对你有帮助：）

赞(0）回复(0）举报 2022-12-14

我来回答

typescript 如何使用ReactElement类型

1条答案

相关问题

热门标签

最新问答