在React中连接变量和字符串

Question

是否有一种方法可以将React的花括号表示法和href标签结合起来？假设我们在状态中有以下值：

{ url: 'https://www.example.com' }

{this.state.id}

并在标签上使用以下HTML属性：

href="#demo1"
id="demo1"

有没有办法将id状态添加到HTML属性中，以获得以下结果：

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

这将产生：

#demo1

- lost9123193

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

---

实现第一个，eslint 建议实现你的第二个，使用字符串模板字面量。https://eslint.org/docs/rules/prefer-template - w00ngy

@w00ngy 是的，你应该这样做。ES2015（引入模板）刚开始得到广泛采用。现在，模板字面量是首选。 - Andrew Li

Answer 2

连接 props/变量 的最佳方式：

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

- Kevin Laurente

Answer 3

如果您希望在JSX中实现它

<button className={`tab__btn first ${props.state}`} >
    {props.text}
</button>

- Hyzyr

Answer 4

你可以简单地这样做...

 <img src={"http://img.example.com/test/" + this.props.url +"/1.jpg"}/>

- Michael

Answer 5

在React中使用map连接变量和字符串，例如：

{listOfCategories.map((Categories, key) => { return ( <a href={`#${Categories.designation}`} className="cat-link" key={key}> </div> </a> ); })}

- yassine dotma