React JSX: Access Props в котировках

Question

В JSX, как вы ссылаетесь на значение от props внутри значения цитируемого атрибута?

Например:

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

Результирующий выходной HTML является:

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

Answer 1

React (или JSX) не поддерживает переменную интерполяции внутри значения атрибута, но вы можете поместить любое выражение JS внутри фигурных скобок как целое значение атрибута, поэтому это работает:

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

Answer 2

Если вы используете используя JSX с Harmony, вы можете сделать это:

<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']} /> 

Это дает URL как "http://examole.com/randomview/images/2/dp_pics/182328.jpg" (случайный пример)

Answer 5

Лучшие практики, чтобы добавить метод получения для этого:

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

    } 
}