是否有一种方法可以将React的花括号表示法和href
标签结合起来?假设我们在状态中有以下值:
{ url: 'https://www.example.com' }
{this.state.id}
并在标签上使用以下HTML属性:
href="#demo1"
id="demo1"
有没有办法将
id
状态添加到HTML属性中,以获得以下结果:href={"#demo + {this.state.id}"}
这将产生:
#demo1
是否有一种方法可以将React的花括号表示法和href
标签结合起来?假设我们在状态中有以下值:
{ url: 'https://www.example.com' }
{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
${expr}
(插入表达式)实现,这更接近于你所尝试的操作:href={`#demo${this.state.id}`}
this.state.id
的值,并将其连接到#demo
。这相当于执行:"#demo" + this.state.id
。连接 props/变量 的最佳方式:
var sample = "test";
var result = `this is just a ${sample}`;
//this is just a test
如果您希望在JSX中实现它
<button className={`tab__btn first ${props.state}`} >
{props.text}
</button>
你可以简单地这样做...
<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> ); })}