具有 '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 仅处理 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 不必是通用的就可以识别它应该接收哪些道具。 as 道具是一个充分的判别式。

我们可以通过创建所有标签及其各自属性的联合来概括此示例：

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 变得非常慢
错误消息变得含糊不清
整体复杂度增加。

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

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

Generic React TypeScript component with 'as' prop (able to render any valid dom node)

javascript

typescript

reactjs

typescript-generics