在React JSX中访问引号内的道具 [英] Access props inside quotes in React JSX

问题描述

在JSX中，如何从带引号的属性值内部引用props中的值?

In JSX, how do you reference a value from props from inside a quoted attribute value?

例如:

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

结果HTML输出为:

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

推荐答案

React(或JSX)不支持在属性值内插入变量插值，但是您可以将任何JS表达式放在花括号内作为整个属性值，因此可行:

React (or JSX) doesn't support variable interpolation inside an attribute value, but you can put any JS expression inside curly braces as the entire attribute value, so this works:

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

这篇关于在React JSX中访问引号内的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！