在React中串联变量和字符串

Question

有没有办法整合React的花括号符号和href标签？假设我们在状态中具有以下值：

{this.state.id}

以及标签上的以下HTML属性：

href="#demo1"
id="demo1"

有没有一种方法可以将id状态添加到HTML属性中以获得类似这样的信息：

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

您还可以将ES6字符串插值/ 模板文字与（反引号）和${expr}`（插值表达式）一起使用，这与您似乎想做的事情更接近：

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

这将基本上替代的值this.state.id，并将其连接到#demo。等效于："#demo" + this.state.id。