☰

React JSXの動的タグ名 質問する

tag-icon • tag-icon javascript node.js reactjs jsx
React JSXの動的タグ名 質問する

見出しレベルがプロパティによって指定されるHTML 見出しタグ ( h1、、など)用の React コンポーネントを作成しようとしています。h2h3

私は次のようにやってみました:

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

そして、次のような出力を期待しました:

<h1>Hello</h1>

しかし、これは機能しません。

これを実行する方法はありますか?

ベストアンサー1

それをインプレースで行う方法はないので、変数に入れるだけです（最初の文字を大文字にする):

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

<CustomTag>Hello</CustomTag>

おすすめ記事