在React中连接变量和字符串

有没有一种方法来合并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

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

 <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>

推荐文章