在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字符串插值/ 模板文字与`(反引号)和${expr}(插值表达式)一起使用,这更接近您似乎要尝试的操作:

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

这基本上会替换它的值this.state.id,将它连接起来#demo.它等同于:"#demo" + this.state.id.

Answer 2

连接道具/变量的最佳方法:

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

Answer 3

如果你想在 JSX 中做到这一点

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

Answer 4

你可以简单地这样做..

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