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

例如:

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

生成的HTML输出是:

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

推荐答案

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

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

Javascript相关问答推荐

PHP中的搜索功能

MongoDB - 查询以获取与排序的第一项中的键匹配的项目

在另一个方法的内部函数中调用 this.method()

react ,在使用 useContext 时得到未定义的结果

如何获取html树的#text节点数组

当一次按下超过 2 个键时,p5.js keyIsDown() 行为不一致

ObjectSpaceNormalMap 不适用于 MeshNormalMaterial

在javascript中转义双引号

这个在 express 中接收 RequestHandler 的函数是如何工作的?

在数据表中进行过滤时更新总和

像stackoverflow这样的textarea预览有

如何在html中刷新选择列表

使用谷歌脚本时,币安搜索 API 返回 403

如何根据另一个输入的值进行输入?

runtime.js:7 未捕获的错误:[RequireAuth] 不是 组件. 的所有子组件必须是

nuxt 中未调用 AsyncData

overflow-anchor不适用于水平滚动

从具有相同 id 的元素列表中动态获取特定元素的值

用状态中的选中字段react 更新对象数组

正则表达式(Regex)不适用于坐标javascript的所有样本