[解決済み】Reactで変数と文字列を連結する

質問

Reactの中括弧記法と href タグを使用することができますか？ステートに以下のような値があるとします。

{this.state.id}

と、タグに以下のHTML属性を指定します。

href="#demo1"
id="demo1"

を追加する方法はありますか？ id の状態をHTML属性で指定すると、このようなものになります。

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

というのが得られます。

#demo1

解決方法は？

ほぼ正解です。ただ、引用符の位置が少しずれています。全体を通常の引用符で囲むと、文字通り次のような文字列が得られます。 #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 .