具有“as”属性的通用 React TypeScript 组件（能够呈现任何有效的 dom 节点）

Question

我在下面的示例中按预期工作，我的问题是 - 无论如何我可以重写它，以便我不必同时传递泛型T和as道具。理想情况下，我只想传递as道具并让组件的道具界面使用它。

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

解决方案二

当涉及到第一个变体时，它更加棘手。你想要的不是一个通用的组件，而是一个 props 的联合。为了说明原因，让我们考虑一个MyComponent仅处理aand联合的具体示例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为了识别它应该接收哪些道具，不必是通用的。该as道具是足够的判别。

我们可以通过创建所有标签及其各自 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

这将完成工作，因为它与我们手动定义联合一样。然而，创建如此庞大的工会也有弊端：

• IntelliSense 变得非常缓慢
• 错误信息变得神秘
• 整体复杂性增加。

只是有一点需要注意！;)