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

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

props

中的值

例如：

{`string ${variable} another string`}

生成的HTML输出为：

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

---

如果您将JSX与Harmony一起使用，您可以这样做：

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

---

在这里，您将

src

的值作为表达式写入。

如果要使用es6模板文本，还需要在记号周围使用大括号：

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

---

对于正在寻找“映射”功能和动态数据的答案的人，这里是一个工作示例

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

---

这将URL设置为“”（随机示例）

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

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

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

getImageURI（）{
返回“images/”+this.props.image；
}

---

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

注意：在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>
      );

  }
}

类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={i:1}；
}
handleClick（）{
this.setState（prevState=>（{i:prevState.i+1}））；
console.log（this.state.j）；
}
render（）{
返回(
单击以更改图像
);
}
}

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

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

---

这里是动态类名或道具的最佳选择，只需像在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（）{
让imageUrl=this.props.image？“images/”+this.props.image:“某个占位符url图像”；
返回(
)
}

es6中的backtips呢？@DavidLavieri请看下面Cristi的答案。这是很难找到的。对于可重复使用的容器来说，这是一个必须知道的信息，这样人们就不会因为提到Harmony而感到困惑，这是的一部分，而答案是在它成为标准之前的几个月：我建议使用

类名

包来构建动态类名

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