在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}">
当前回答
如果你正在使用JSX和Harmony,你可以这样做:
<img className="image" src={`images/${this.props.image}`} />
在这里,您将src的值写成表达式。
其他回答
React(或JSX)不支持属性值内的变量插值,但你可以把任何JS表达式放在花括号内作为整个属性值,所以这是可行的:
<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>
)
}
如果你正在使用JSX和Harmony,你可以这样做:
<img className="image" src={`images/${this.props.image}`} />
在这里,您将src的值写成表达式。
你可以这样做
<img className="img" src=`images/${this.props.image}`>
注意:在react中,你可以把javascript表达式放在花括号内。我们可以在这个例子中使用这个属性。 注意:请看下面的例子:
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {i:1};
}
handleClick() {
this.setState(prevState => ({i : prevState.i + 1}));
console.log(this.state.j);
}
render() {
return (
<div>
<p onClick={this.handleClick.bind(this)}>Click to change image</p>
<img src={'images/back'+ this.state.i+'.jpg'}/>
</div>
);
}
}