javascript - 在 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 字符串插值/template literals使用 `(反引号)和 ${expr}(内插表达式)，这更接近于您似乎想要做的事情:

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

这基本上会替换 this.state.id 的值，将其连接到 #demo。它相当于做:"#demo"+ this.state.id。