有没有办法整合React的花括号符号和href
标签?假设我们在状态中具有以下值:
{this.state.id}
以及标签上的以下HTML属性:
href="#demo1"
id="demo1"
有没有一种方法可以将id
状态添加到HTML属性中以获得类似这样的信息:
href={"#demo + {this.state.id}"}
这将产生:
#demo1
有没有办法整合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}
这将使用字符串文字#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
。
连接道具/变量的最佳方法:
var sample = "test";
var result = `this is just a ${sample}`;
//this is just a test
exampleData =
example1 =
example2 =
我推荐第二个例子,它更快。