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

JavaScript

Mandy梅Green

2020-03-10

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

例如：

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

产生的HTML输出为：

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

第443篇《在React JSX中访问引号内的道具》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答

LEY乐 2020.03.10

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

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

十三LEY 2020.03.10

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

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

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

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

小卤蛋理查德Tony 2020.03.10

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

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

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

{`string ${variable} another string`}

JinJinDavaid卡卡西 2020.03.10

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

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

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

JimAGil 2020.03.10

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

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

TonyStafan 2020.03.10

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android