关于javascript：在React JSX中访问引号内的引号


Access props inside quotes in React JSX

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

例如：

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

生成的HTML输出是：

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

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

1
<img className="image" src={"images/" + this.props.image} />
相关讨论

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

1
<img className="image" src={`images/${this.props.image}`} />
相关讨论

如果你在和谐中使用JSX，你可以这样做：

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

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

相关讨论

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

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

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

1
{`string ${variable} another string`}

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

1
2
3
4
5
getImageURI() {
  return"images/" + this.props.image;
}

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

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

对于People，寻找w.r.t的答案来"映射"函数和动态数据，这是一个工作示例。

1
<img src={"http://examole.com/randomview/images" + each_actor['logo']} />

这将URL设为"http://examole.com/randomview/images/2/dp_pics/182328.jpg"(随机示例)

这是Dynamic className或Props的最佳选项，只需像在Javascript中那样进行一些连接。

1
2
3
4
5
     className={
       "badge" +
        (this.props.value ?"badge-primary" :"badge-danger") +
       " m-4"
      }
相关讨论

注意：在反应中，您可以将javascript表达式放在花括号中。我们可以在此示例中使用此属性。
注意：看一下下面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class LoginForm extends React.Component {

  constructor(props) {
    super(props);

    this.state = {i:1};
  }

  handleClick() {
    this.setState(prevState => ({i : prevState.i + 1}));

    console.log(this.state.j);  
  }


  render() {

    return (
     
        <p onClick={this.handleClick.bind(this)}>Click to change image
</p>
        <img src={'images/back'+ this.state.i+'.jpg'}/>
     
      );

  }
}