React JSX：在报价中访问道具

在JSX中，如何从引用的属性值中引用来自props值？

例如：

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

生成的HTML输出是：

 <img class="image" src="images/{this.props.image}">

React（或JSX）不支持属性值内的variables插值，但是可以将大括号内的任何JSexpression式作为整个属性值，所以这是可行的：

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

如果要使用es6string插值，则还需要在刻度线周围加上大括号：

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

如果你和Harmony一起使用JSX，你可以这样做：

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

在这里，您将src的值作为expression式写入。

最佳做法是添加getter方法：

 getImageURI() { return "images/" + this.props.image; } <img className="image" src={this.getImageURI()} />

那么，如果你稍后有更多的逻辑，你可以顺利地维护代码。

对于人们，寻找“地图”function和dynamic数据的答案，这里是一个工作的例子。

 <img src={"http://examole.com/randomview/images" + each_actor['logo']} />