[英]Generic React TypeScript component with 'as' prop (able to render any valid dom node)
I have this working as expected in the below example, my question is - is there anyway i can rewrite this so that i don't have to pass both a generic T
and the as
prop.我在下面的示例中按预期工作,我的问题是 - 无论如何我可以重写它,这样我就不必同时传递通用
T
和as
道具。 I would ideally like to just pass the as
prop and have the component's prop interface use that.理想情况下,我希望只传递
as
道具并让组件的道具接口使用它。
Is this possible in TypeScript?这在 TypeScript 中是否可行?
export type Props<
T extends keyof JSX.IntrinsicElements
> = JSX.IntrinsicElements[T] & {
as?: keyof JSX.IntrinsicElements
}
export const MyComponent = <T extends keyof JSX.IntrinsicElements>({
as: Component = 'div',
}: Props<T>) => {
// Stuff
return <Component />
}
// Usage
const Anchor = () => <MyComponent<'a'> href='foo' as='a' id='bar' />
It's fairly easy to implement the second variant — the one where an explicit type argument is required:实现第二个变体相当容易——需要显式类型参数的变体:
Solution one解决方案一
import * as React from 'react';
type Props<K extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[K];
declare class MyComponent<K extends keyof JSX.IntrinsicElements> extends React.Component<Props<K>> {}
<MyComponent<'a'> href="https://example.com/" id="myLink" />;
Solution two解决方案二
When it comes to the first variant, it's more tricky.当涉及到第一个变体时,它更加棘手。 What you want is not a generic component, but a union of props.
您想要的不是通用组件,而是道具的联合。 To illustrate why, let's consider a concrete example when
MyComponent
handles only a union of a
and button
.为了说明原因,让我们考虑一个具体示例,当
MyComponent
仅处理a
和button
的联合时。
import * as React from 'react';
type Props =
| ({ as: 'a' } & JSX.IntrinsicElements['a'])
| ({ as: 'button' } & JSX.IntrinsicElements['button']);
declare class MyComponent<T extends 'a' | 'button'> extends React.Component<Props> {}
<MyComponent as="a" href="https://example.com" />; // ✔ OK
<MyComponent as="button" href="https://example.com" />; // ✘ Compile-time error
MyComponent
doesn't have to be generic in order to recognize which props it should receive. MyComponent
不必是通用的以识别它应该接收哪些道具。 The as
prop is a sufficient discriminant. as
道具是一个充分的判别式。
We can generalize this example by creating a union of all tags and their respective props:我们可以通过创建所有标签及其各自道具的联合来概括这个例子:
import * as React from 'react';
type Props = {
[K in keyof JSX.IntrinsicElements]: { as: K } & JSX.IntrinsicElements[K];
}[keyof JSX.IntrinsicElements];
declare class MyComponent extends React.Component<Props> {}
<MyComponent as="a" href="https://example.com" />; // ✔ OK
<MyComponent as="button" href="https://example.com" />; // ✘ Compile-time error
This will get the job done, as it's the same as if we defined our union manually.这将完成工作,就像我们手动定义联合一样。 However, creating such a huge union has downsides:
然而,创建如此庞大的工会也有不利之处:
Just something to be aware of;只是需要注意的事情; ;)
;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.