在JSX中,如何从引用的属性值中引用props中的值?
例如:
<img className="image" src="images/{this.props.image}" />
结果的HTML输出是:
<img class="image" src="images/{this.props.image}">
在JSX中,如何从引用的属性值中引用props中的值?
例如:
<img className="image" src="images/{this.props.image}" />
结果的HTML输出是:
<img class="image" src="images/{this.props.image}">
当前回答
这里是动态类名或道具的最佳选项,只需像我们在Javascript中做的那样做一些连接。
className={
"badge " +
(this.props.value ? "badge-primary " : "badge-danger ") +
" m-4"
}
其他回答
最佳实践是为它添加getter方法:
getImageURI() {
return "images/" + this.props.image;
}
<img className="image" src={this.getImageURI()} />
然后,如果后面有更多的逻辑,就可以顺利地维护代码。
这里是动态类名或道具的最佳选项,只需像我们在Javascript中做的那样做一些连接。
className={
"badge " +
(this.props.value ? "badge-primary " : "badge-danger ") +
" m-4"
}
你可以使用
<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>
)
}
你可以这样做
<img className="img" src=`images/${this.props.image}`>
你可以使用ES6模板字符串,而不是添加变量和字符串! 这里有一个例子:
<img className="image" src={`images/${this.props.image}`} />
对于JSX内的所有其他JavaScript组件,在花括号内使用模板字符串。要“注入”一个变量,请使用美元符号后跟花括号,其中包含您想要注入的变量。例如:
{`string ${variable} another string`}