在 JSX 中，如何props从引用的属性值内部引用值？
例如：
<img className="image" src="images/{this.props.image}" />
生成的 HTML 输出是：
<img class="image" src="images/{this.props.image}">
在 React JSX 中访问引号内的props
IT技术
javascript
reactjs
react-props
2021-04-03 10:39:49
6个回答
React（或 JSX）不支持属性值内的变量插值，但您可以将任何 JS 表达式放在花括号内作为整个属性值，所以这是有效的：
<img className="image" src={"images/" + this.props.image} />
如果你想使用 es6 模板文字，你还需要在刻度线周围加上大括号：
<img className="image" src={`images/${this.props.image}`} />
如果你在 Harmony 中使用 JSX，你可以这样做：
<img className="image" src={`images/${this.props.image}`} />
在这里，您将值写src为表达式。
您可以使用 ES6 模板字符串，而不是添加变量和字符串！下面是一个例子：
<img className="image" src={`images/${this.props.image}`} />
对于 JSX 中的所有其他 JavaScript 组件，请在花括号内使用模板字符串。要“注入”变量，请使用美元符号后跟包含要注入的变量的花括号。例如：
{`string ${variable} another string`}
最佳实践是为此添加 getter 方法：
getImageURI() {
return "images/" + this.props.image;
}
<img className="image" src={this.getImageURI()} />
然后，如果你以后有更多的逻辑，你可以顺利地维护代码。