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> 
    ); 

    } 
}