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

Question

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

例如：

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

生成的 HTML 输出是：

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

原文由 cantera 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React（或 JSX）不支持属性值内的变量插值，但你可以将任何 JS 表达式放在花括号内作为整个属性值，所以这是可行的：

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

原文由 Sophie Alpert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你想使用 es6 模板文字，你还需要在刻度线周围加上大括号：

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

原文由 Cristi 发布，翻译遵循 CC BY-SA 3.0 许可协议