在React中连接变量和字符串

有没有一种方法来合并React的花括号符号和href标签?假设我们在状态中有以下值:

{this.state.id}

以及标签上的以下HTML属性:

href="#demo1"
id="demo1"

是否有一种方法可以将id状态添加到HTML属性中，以获得如下内容:

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

这将产生:

#demo1
521619 次浏览
小开
最佳答案

你几乎是对的，只是放错了几句引述。将整个内容用常规引号括起来会给你一个字符串#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
小开

你可以简单地做到这一点。

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

用于连接变量和字符串在React与map， 例如:

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

如果你想在JSX中做

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

提交答案