Реагировать JSX: доступ к реквизитам в кавычках

180

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

Например:

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

Итоговый вывод HTML:

<img class="image" src="images/{this.props.image}">
Теги:
react-jsx

5 ответов

317
Лучший ответ

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

<img className="image" src={"images/" + this.props.image} />
Поделиться
  • 1
    Это работает отлично - спасибо за быстрый ответ.
  • 23
    как насчет всплывающих окон в es6?
Показать ещё 2 комментария
151

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

<img className="image" src={`images/${this.props.image}`} />
Поделиться
  • 0
    будущие литералы шаблона ES6
  • 0
    Строка, заключенная в обратные символы, является «литералом шаблона»: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
31

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

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

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

Поделиться
  • 1
    это то, что трудно найти. и для многоразовых контейнеров это необходимо знать
  • 1
    Чтобы люди не запутались в упоминании о Harmony, это часть стандарта ES6 , а ответ датируется несколькими месяцами до того, как он стал стандартом.
3

Лучшие методы - добавить метод getter для этого:

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

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

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

Поделиться
1

Для людей, ища ответы 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" (случайный пример)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню