javascript - 具有 'as' 属性的通用 React TypeScript 组件(能够渲染任何有效的 dom 节点)

Question

我在下面的示例中按预期工作，我的问题是 - 无论如何我可以重写它，这样我就不必通过通用 T和 as支柱。理想情况下，我只想通过 as prop 并让组件的 prop 接口(interface)使用它。

这在 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' />

Answer 1

实现第二个变体相当容易——需要显式类型参数的变体:

解决方案一

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" />;

解决方案二

当涉及到第一个变体时，它更加棘手。您想要的不是通用组件，而是 Prop 的联合。为了说明原因，让我们考虑一个具体的例子，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为了识别它应该接收哪些 Prop ，不必是通用的。 as prop 是一个充分的判别式。

我们可以通过创建所有标签及其各自属性的联合来概括这个例子:

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

这将完成工作，就像我们手动定义联合一样。然而，创建如此庞大的工会也有不利之处:

IntelliSense 变得非常缓慢

错误消息变得神秘

整体复杂性增加。

只是需要注意的事情! ;)