在 React 中连接变量和字符串

javascript html ecmascript-6 reactjs

2022-08-30 00:43:57

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

{this.state.id}

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

href="#demo1"
id="demo1"

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

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

这将产生：

#demo1

答案 1

你几乎是对的，只是放错了几个引号。将整个事情用常规引号括起来会从字面上给你字符串 - 你需要指出哪些是变量，哪些是字符串文本。由于其中的任何内容都是内联 JSX 表达式，因此您可以执行以下操作：#demo + {this.state.id}{}

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

这将使用字符串文本并将其连接到的值。然后，这可以应用于所有字符串。请考虑以下情况：#demothis.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

答案 2

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

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