在 React 中连接变量和字符串

Question

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

{this.state.id}

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

href="#demo1"
id="demo1"

有没有办法可以将 id 状态添加到 HTML 属性以获得如下内容：

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

这将产生：

#demo1

原文由 lost9123193 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 。

原文由 Andrew Li 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

连接道具/变量的最佳方式：

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

原文由 Kevin Laurente 发布，翻译遵循 CC BY-SA 3.0 许可协议