Доступ к реквизитам внутри кавычек в React JSX

295

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

Например:

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

В результате получается HTML-вывод:

<img class="image" src="images/{this.props.image}">
Кантера
источник

Ответы:

476

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

<img className="image" src={"images/" + this.props.image} />
Софи Альперт
источник
26
как насчет всплывающих окон в es6?
Дэвид Лавьери
1
@DavidLavieri См. Ответ Кристи stackoverflow.com/a/30061326/70345 ниже.
Ян Кемп
235

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

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

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

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

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

user3089094
источник
1
это то, что трудно найти. а для многоразовых контейнеров это нужно знать
holms
2
Чтобы люди не запутались в упоминании о Harmony, это часть стандарта ES6 , а ответ датируется несколькими месяцами до того, как он стал стандартом.
Сергей Гринько
12

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

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

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

{`string ${variable} another string`}
Saahil
источник
8

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

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

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

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

Абденнур ТУМИ
источник
2

Для людей, ищущих ответы относительно функции «карта» и динамических данных, вот рабочий пример.

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

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

ОЗУ
источник
1

Примечание: в реакции вы можете поместить выражение 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>
      );

  }
}
Киран
источник
1

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

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }
Саад Мирза
источник
Я бы порекомендовал использовать classnamesпакет для создания динамических classNames
Дэвид Лавьери
1

ты можешь использовать

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

или

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

или

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }
Али Мохаммед
источник