gpt4 book ai didi

reactjs - 有没有办法提取 JSX 元素的 Prop 类型?

转载 作者:行者123 更新时间:2023-12-05 09:05:46 27 4
gpt4 key购买 nike

我的意图是从给定的 JSX 元素中提取属性,这可能吗?

这几乎是我失败的尝试......在此先感谢您的帮助;)

function getComponentProps<T extends React.ReactElement>(element: T): ExtractProps<T>;

function Component({ name }: { name: string }) {
return <h1>{name}</h1>;
}

type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends React.ComponentType<infer TProps>
? TProps
: TComponentOrTProps;

const componentProps = getComponentProps(<Component name="jon" />); //type is JSX.Element

最佳答案

在大多数情况下,您不能这样做。

理论中,React.ReactElement type 是带有类型参数的泛型 P这取决于 Prop 。因此,如果您要有一个强类型元素,那么您可以逆向工作。

type ElementProps<T extends React.ReactNode> = T extends React.ReactElement<infer P> ? P : never;

现实中,只有通过 React.createElement 创建元素,您才能获得正确的 Prop 类型而不是 JSX。

任何 JSX 元素 <Component name="John" />刚得到类型 JSX.Element这显然没有关于 Prop 的信息,所以你不能从那个向后工作到 Prop 类型。

const e1 = React.createElement(
Component,
{ name: 'John' }
)

type P1 = ElementProps<typeof e1> // type: {name: string}

console.log(getElementProps(e1)); // will log {name: "John"}
const e2 = <Component name="John" />

type P2 = ElementProps<typeof e2> // type: any

console.log(getElementProps(e2)); // will log {name: "John"}

Playground Link

从不同的角度来处理情况要容易得多。如果您的函数采用类似 Component 的组件,您将能够派生出正确的 Prop 类型。或 div而不是已解决的元素。您可以使用 ComponentProps函数和类组件的实用程序类型以及 JSX.IntrinsicElements内置 map 。

关于reactjs - 有没有办法提取 JSX 元素的 Prop 类型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66753903/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com