在JSX中，如何从引用的属性值中引用props中的值?
例如:
<img className="image" src="images/{this.props.image}" />
结果的HTML输出是:
<img class="image" src="images/{this.props.image}">
当前回答
如果你正在使用JSX和Harmony，你可以这样做:
<img className="image" src={`images/${this.props.image}`} />
在这里，您将src的值写成表达式。
其他回答
这里是动态类名或道具的最佳选项，只需像我们在Javascript中做的那样做一些连接。
className={
"badge " +
(this.props.value ? "badge-primary " : "badge-danger ") +
" m-4"
}
如果你正在使用JSX和Harmony，你可以这样做:
<img className="image" src={`images/${this.props.image}`} />
在这里，您将src的值写成表达式。
如果你想使用es6模板文字，你也需要在标记周围使用大括号:
<img className="image" src={`images/${this.props.image}`} />
你可以使用
<img className="image" src=`images/${this.props.image}`>
or
<img className="image" src={'images/'+this.props.image}>
or
render() {
let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
return (
<div>
<img className="image" src={imageUrl} />
</div>
)
}
React(或JSX)不支持属性值内的变量插值，但你可以把任何JS表达式放在花括号内作为整个属性值，所以这是可行的:
<img className="image" src={"images/" + this.props.image} />
