在 React JSX 中访问引号内的道具

javascript reactjs react-props

2022-08-29 23:54:22

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

例如：

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

生成的 HTML 输出为：

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

答案 1

React（或JSX）不支持在属性值内进行变量插值，但您可以将任何JS表达式放在大括号内作为整个属性值，因此此方法有效：

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

答案 2

如果要使用 es6 模板文本，还需要在刻度线两边加上大括号：

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

推荐