在JSX中,如何从引用的属性值中引用props中的值?
例如:
<img className="image" src="images/{this.props.image}" />
结果的HTML输出是:
<img class="image" src="images/{this.props.image}">
在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} />
其他回答
如果你正在使用JSX和Harmony,你可以这样做:
<img className="image" src={`images/${this.props.image}`} />
在这里,您将src的值写成表达式。
React(或JSX)不支持属性值内的变量插值,但你可以把任何JS表达式放在花括号内作为整个属性值,所以这是可行的:
<img className="image" src={"images/" + this.props.image} />
对于寻找w.r.t到“映射”函数和动态数据的答案的People,这里有一个工作示例。
<img src={"http://examole.com/randomview/images" + each_actor['logo']} />
这将给出URL为“http://examole.com/randomview/images/2/dp_pics/182328.jpg”(随机示例)
你可以使用ES6模板字符串,而不是添加变量和字符串! 这里有一个例子:
<img className="image" src={`images/${this.props.image}`} />
对于JSX内的所有其他JavaScript组件,在花括号内使用模板字符串。要“注入”一个变量,请使用美元符号后跟花括号,其中包含您想要注入的变量。例如:
{`string ${variable} another string`}
如果你想使用es6模板文字,你也需要在标记周围使用大括号:
<img className="image" src={`images/${this.props.image}`} />