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

Mandy梅Green2020-03-10

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

例如：

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

产生的HTML输出为：

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

LEY乐2020/03/10 10:44:58

这是Dynamic className或Props的最佳选择，就像我们在Javascript中一样进行一些串联。

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

十三LEY2020/03/10 10:44:58

最佳做法是为此添加getter方法：

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

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

然后，如果以后有更多逻辑，则可以平稳地维护代码。

小卤蛋理查德Tony2020/03/10 10:44:58

无需添加变量和字符串，您可以使用ES6模板字符串！这是一个例子：

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

至于JSX中的所有其他JavaScript组件，请在花括号内使用模板字符串。要“注入”变量，请使用美元符号，然后在花括号中包含要注入的变量。例如：

{`string ${variable} another string`}

JinJinDavaid卡卡西2020/03/10 10:44:58

如果您将JSX与Harmony结合使用，则可以执行以下操作：

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

在这里，您正在编写src表达式的值。

JimAGil2020/03/10 10:44:58

React（或JSX）不支持在属性值内进行变量插值，但是您可以将任何JS表达式放在花括号内作为整个属性值，因此可以使用：

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

TonyStafan2020/03/10 10:44:58

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

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

Newest Answer