web-dev-qa-db-ja.com

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

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

{this.state.id}

タグの次のHTML属性

href="#demo1"
id="demo1"

私はこのようなものを得るためにHTML属性にid状態を追加することができる方法があります：

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

これは次のようになります。

#demo1
javascripthtmlreactjsecmascript-6
85
lost9123193

あなたはほとんど正しいです、ちょうどいくつかの引用符を置き忘れました。全体を通常の引用符で囲むと、文字列#demo + {this.state.id}が文字通り得られます - どれが変数でどれが文字列リテラルであるかを示す必要があります。 {}内のものはすべてインラインのJSX expression なので、次のことができます。

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を実行するのと同じです。

179
Li357

小道具/変数を連結するための最良の方法：

var sample = "test";    
var result = `this is just a ${sample}`;    
//this is just a test
24
Kevin Laurente