ReactでPropsからHタグのレベルを変える。

👇のようにPropsからHタグのレベルを制御したいとします。

例

<H level={1} /> // = <h1 />
<H level={2} /> // = <h2 />
<H level={3} /> // = <h3 />
<H level={4} /> // = <h4 />
<H level={5} /> // = <h5 />
<H level={6} /> // = <h6 />

React.ElementTypeにキャストすることで文字列からHTMLの標準タグを作ることができます。

解決法

function H(props) {
    const Header = `h${props.level}` as React.ElementType;
    return <Header />;
}