[解決済み】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>
関連
-
[解決済み】React this.setStateは関数ではありません。
-
[解決済み] Error: yarn start - エラー コマンド "start" が見つかりません。
-
[解決済み] React JSXのforEach()でHTMLが出力されない
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] Reactでブラウザのリサイズ時にビューを再描画する
-
[解決済み] React/JSXにscriptタグを追加する。
-
[解決済み】React / JSXの動的なコンポーネントの名前
-
[解決済み】Reactアプリケーションにサービスを持たせる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み】ngrokがReact devサーバーに接続しようとすると、無効なホストヘッダが表示される。
-
[解決済み] useStateプロパティのフックにmap関数を使用する方法
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"
-
[解決済み] React TypeScriptで作業しているときに、Jestが予期しないトークンに遭遇した
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] reactのuseStateフックでコールバックを使う方法 [重複]。
-
[解決済み] ReactJSのコンポーネント名は大文字で始めなければならない?