Reactで変数と文字列を連結する質問する

Reactで変数と文字列を連結する質問する

React の中括弧表記とタグを組み込む方法はありますかhref? 状態に次の値があるとします。

{this.state.id}

タグには次の HTML 属性が含まれます。

href="#demo1"
id="demo1"

id次のような状態を HTML 属性に追加する方法はありますか?

href={"#demo + {this.state.id}"}

その結果は次のようになります:

#demo1

ベストアンサー1

ほぼ正解です。引用符の位置が少し間違っているだけです。全体を通常の引用符で囲むと、文字通り文字列が得られます#demo + {this.state.id}。どれが変数でどれが文字列リテラルであるかを示す必要があります。内部はすべて{}インライン JSXなので、次のようにすることができます。

href={"#demo" + this.state.id}

これは文字列リテラルを使用し#demo、それを の値に連結しますthis.state.id。これはすべての文字列に適用できます。次のことを考慮してください。

var text = "world";

この:

{"Hello " + text + " Andrew"}

これにより、次の結果が得られます。

Hello world Andrew 

ES6 文字列補間/テンプレートリテラルを ` (バックティック) と${expr}(補間式) とともに使用することもできます。これは、あなたがやろうとしていることに近いものです。

href={`#demo${this.state.id}`}

これは基本的に の値を に置き換えてthis.state.idに連結します#demo。これは、 を実行することと同等です"#demo" + this.state.id

おすすめ記事