帶有“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" />;

解決方案二

當涉及到第一個變體時，它更加棘手。 您想要的不是通用組件，而是道具的聯合。 為了說明原因，讓我們考慮一個具體示例，當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 變得非常緩慢
• 錯誤消息變得神秘
• 整體復雜性增加。

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