多态

npm install @radix-ui/react-polymorphic

import type * as Polymorphic from '@radix-ui/react-polymorphic';

import React from 'react';
import type * as Polymorphic from '@radix-ui/react-polymorphic';

type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', {}>;

const Box = React.forwardRef(({ as: Comp = 'div', ...props }, forwardedRef) => (
  <Comp {...props} ref={forwardedRef} />
)) as PolymorphicBox;

export default () => (
  <Box>
    <Box as="h1">This is a h1</Box>
    <Box as="button">This is a button</Box>
  </Box>
);

Polymorphic.ForwardRefComponent<
  keyof JSX.IntrinsicElements,
  OwnProps
>

Polymorphic.ForwardRefComponent<
  'button',
  { variant: 'solid' | 'outline' }
>

Polymorphic.OwnProps<
  Polymorphic.ForwardRefComponent
>;

Polymorphic.OwnProps<typeof Button>;
// { variant: 'solid' | 'outline' }

Polymorphic.IntrinsicElement<
  Polymorphic.ForwardRefComponent
>;

Polymorphic.IntrinsicElement<typeof Button>;
// 'button'

import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import type * as Polymorphic from '@radix-ui/react-polymorphic';

type PolymorphicDialogContent = Polymorphic.ForwardRefComponent<
  Polymorphic.IntrinsicElement<typeof Dialog.Content>,
  Polymorphic.OwnProps<typeof Dialog.Content> & {
    size?: 'small' | 'large';
  }
>;

const DialogContent = React.forwardRef(
  ({ size = 'small', ...props }, forwardedRef) => (
    <Dialog.Content {...props} className={size} ref={forwardedRef} />
  )
) as PolymorphicDialogContent;

export default () => (
  <Dialog.Root>
    <Dialog.Trigger>Open</Dialog.Trigger>
    <Dialog.Overlay />
    <DialogContent as="article">
      <p>This is an article</p>
    </DialogContent>
  </Dialog.Root>
);