1. ホーム
  2. reactjs

[解決済み】React JSXの動的なタグ名

2022-04-03 04:38:18

質問

HTMLの見出しタグ( h1 , h2 , h3 など)で、見出しレベルはpropで指定します。

こんな感じでやってみました。

<h{this.props.level}>Hello</h{this.props.level}>

というような出力が期待できます。

<h1>Hello</h1>

が、これはうまくいきません。何か可能な方法はないでしょうか?

解決方法を教えてください。

インプレースでは無理、変数に入れるだけ( 最初の文字を大文字にした ):

const CustomTag = `h${this.props.level}`;

<CustomTag>Hello</CustomTag>