Is there a way to incorporate React's curly brace notation and an href
tag? Say we have the following value in the state:
{this.state.id}
and the following HTML attributes on a tag:
href="#demo1"
id="demo1"
Is there a way I can add the id
state to the HTML attribute to get something like this:
href={"#demo + {this.state.id}"}
Which will yield:
#demo1
You're almost correct, just misplaced a few quotes. Wrapping the whole thing in regular quotes will literally give you the string #demo + {this.state.id}
- you need to indicate which are variables and which are string literals. Since anything inside {}
is an inline JSX expression , you can do:
href={"#demo" + this.state.id}
This will use the string literal #demo
and concatenate it to the value of this.state.id
. This can then be applied to all strings. Consider this:
var text = "world";
And this:
{"Hello " + text + " Andrew"}
This will yield:
Hello world Andrew
You can also use ES6 string interpolation/ template literals with ` (backticks) and ${expr}
(interpolated expression), which is closer to what you seem to be trying to do:
href={`#demo${this.state.id}`}
This will basically substitute the value of this.state.id
, concatenating it to #demo
. It is equivalent to doing: "#demo" + this.state.id
.
the best way to concat props/variables:
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> ); })}
If u want to do it in JSX
<button className={`tab__btn first ${props.state}`} >
{props.text}
</button>
Is there a way to incorporate React's curly brace notation and an href
tag? Say we have the following value in the state:
{this.state.id}
and the following HTML attributes on a tag:
href="#demo1"
id="demo1"
Is there a way I can add the id
state to the HTML attribute to get something like this:
href={"#demo + {this.state.id}"}
Which will yield:
#demo1
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.