Javascript 在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}

这将使用字符串literal

#demo

，并将其连接到

This.state.id

的值。这可以应用于所有字符串。考虑这一点：

var text = "world";

这是：

{"Hello " + text + " Andrew"}

这将产生：

#demo1

安德鲁，你好 您还可以使用ES6字符串插值/with`（backticks）和

${expr}

（interpolated expression），这更接近您想要做的事情：

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

---

这将基本上替换

This.state.id

的值，将其连接到

#demo

。这相当于执行：

“#demo”+this.state.id

收集道具/变量的最佳方法：

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

---

你可以简单地做到这一点

 <img src={"http://img.example.com/test/" + this.props.url +"/1.jpg"}/>

---

用于连接React with map中的变量和字符串， 例如：

{listOfCategories.map((Categories, key) => { return ( <a href={`#${Categories.designation}`} className="cat-link" key={key}> </div> </a> ); })}

{listOfCategories.map（（类别，键）=>{return（）；}）}

实现第一个，eslint建议实现第二个，使用字符串文本模板@是的，你应该。ES2015（引入了模板）刚刚开始被广泛采用。现在，模板文本是最流行的。