Reactコンポーネントのasを実装する

ツールチップなどのライブラリの外部コンポーネントをラップするコンポーネントを作ってたときにvalidateDOMNestingに関するエラーがでて困ってた。

特にコンポーネントをラップするタグに意図はなかったので柔軟なasぽい実装ほしかた

結論

type Props = {
  as?: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;
};

const Container = (props: Props): JSX.Element => {
  const { as: Component = "div", ...rest } = props;
  return <Component {...rest}>{/* some content */}</Component>;
};

ChatGPTさんはもうちょっと複雑な型定義を提案してたけど、これで動きはしそう

補足
creareElement関数でタグを渡す方法も考えたが、ChatGPTさんいわく型推論が聞きづらくなるらしいのでやめた