Reactの変数と文字列の連結

Question

Reactの中カッコ表記とhrefタグを組み込む方法はありますか？

{this.state.id} 

と、次のHTMLタグの属性：：私たちは状態で次の値を持っていると言う

href="#demo1" 
id="demo1" 

は、私が何かを得るためにHTML属性にid状態を追加することができます方法はあります

得られます

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

：

#demo1 

このような

Answer 1

あなたはほとんど正しいですが、ちょうど引用符が間違っています。すべてのものを通常の引用符で囲むことは文字どおり文字列#demo + {this.state.id}を与えるでしょう - どちらが変数で、どれが文字列リテラルであるかを示す必要があります。 {}内部の何かがインラインJSX 表現あるので、あなたが行うことができます：

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

これは#demo文字列リテラルを使用してthis.state.idの値に連結します。これはすべての文字列に適用できます。このことを考えてみましょう：

var text = "world"; 

そして、この：

{"Hello " + text + " Andrew"} 

これが得られます：

Hello world Andrew 

あなたはまた、 `（バッククォート）と${expr}（補間式でES6文字列補間/ template literalsを使用することができますが）これはあなたがしようとしているように見えるものに近いものです：

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

これは基本的にthis.state.idの値を、#demoに連結します。これは、"#demo" + this.state.idと同じです。

Answer 2

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

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