React JSX：在报价中访问道具

Question

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

例如：

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

产生的HTML输出是：

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

Answer 1

阵营（或JSX）不支持的属性值内插变量，但你可以把任何JS表达里面大括号作为整个属性值，所以这个作品：

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

Answer 2

如果你是使用JSX与和谐，你可以这样做：

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

在这里，你正在写一个表达式的src值。

Answer 3

如果你想使用ES6模板的文字，你需要花括号周围的刻度线，以及：

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

Answer 4

为民，寻找答案WRT，以“地图”功能和动态数据，这里是一个工作示例。

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

这给了网址为 “http://examole.com/randomview/images/2/dp_pics/182328.jpg”（随便举个例子）

Answer 5

最佳实践是添加getter方法为：

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

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

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

Answer 6

注意：在反应中，您可以将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> 
    ); 

    } 
}