在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的值写成表达式。

其他回答

如果你想使用es6模板文字,你也需要在标记周围使用大括号:

<img className="image" src={`images/${this.props.image}`} />

如果你正在使用JSX和Harmony,你可以这样做:

<img className="image" src={`images/${this.props.image}`} />

在这里,您将src的值写成表达式。

你可以这样做

<img className="img" src=`images/${this.props.image}`>

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>
    )
  }