React JSX: доступ к реквизиту в кавычках

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

например:

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

результирующий вывод HTML:

<img class="image" src="images/{this.props.image}">
231
javascript react-jsx reactjs

8 ответов

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

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

Если вы хотите использовать литералы шаблона es6, вам также нужны фигурные скобки вокруг галочек:

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

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

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

здесь вы пишете значение src как выражение.

39

рекомендуется добавить метод getter для этого:

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

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

затем, если у вас будет больше логики позже, вы можете поддерживать код плавно.

5

вместо добавления переменных и строк вы можете использовать строки шаблона ES6! Вот пример:

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

Как и для всех других компонентов JavaScript внутри JSX, используйте строки шаблонов внутри фигурных скобок. Чтобы "ввести" переменную, используйте знак доллара, а затем фигурные скобки, содержащие переменную, которую вы хотите ввести. Например:

{`string ${variable} another string`}
3

для людей, ищущих ответы w.r.t для функции " map " и динамических данных, вот рабочий пример. 

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

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

1

Примечание: в 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>
      );

  }
}
0

вот лучший вариант для динамического имени класса или реквизита, просто сделайте некоторую конкатенацию, как мы делаем в Javascript.

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