Reactコンポーネントでの動的なHTMLタグ指定

Vue.js でいう所のいわゆる <component v-bind:is="hoge"></component> というのを React でどう実現するのか分からなかったので調べました。

サンプルコード

type Props = {
  title: string
  htmlElement?: keyof JSX.IntrinsicElements | ''
}

const DynamicCustomTag = ({ text, htmlElement = '' }: Props) => {
  const CustomTag = htmlElement !== '' ? htmlElement : 'div'

  return <CustomTag>{text}</CustomTag>
}

export default DynamicCustomTag

解説

解説も何も無いですが、指定したいタグの文字列を変数に代入してからタグで囲めば良いだけでした。