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

在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} />

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

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

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

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

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

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

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

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

{`string ${variable} another string`}

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

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

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

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

对于People，寻找“映射”功能和动态数据的答案，这是一个有效的示例。

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

这样，URL为“ http://examole.com/randomview/images/2/dp_pics/182328.jpg ”（随机示例）

注意：在react中，您可以将javascript表达式放在大括号内。在此示例中，我们可以使用此属性。
注意：请看以下示例：

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 (
      <div>
        <p onClick={this.handleClick.bind(this)}>Click to change image</p>
        <img src={'images/back'+ this.state.i+'.jpg'}/>
      </div>
      );

  }
}

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

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

您可以使用

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

要么

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

要么

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }