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

在JSX中，如何从引用的属性值中引用props中的值?

例如:

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

结果的HTML输出是:

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

当前回答

你可以这样做

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

其他回答

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”(随机示例)

如果你正在使用JSX和Harmony，你可以这样做:

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

在这里，您将src的值写成表达式。

这里是动态类名或道具的最佳选项，只需像我们在Javascript中做的那样做一些连接。

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

最佳实践是为它添加getter方法:

getImageURI() {
  return "images/" + this.props.image;
}

<img className="image" src={this.getImageURI()} />

然后，如果后面有更多的逻辑，就可以顺利地维护代码。

推荐文章