Вопрос по react-jsx, reactjs, javascript – React JSX: доступ к реквизитам в кавычках

250

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

Например:

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

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

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

Ваш Ответ

8   ответов
418

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

<img className="image" src={"images/" + this.props.image} />
Отлично, все работает, спасибо! Karthik Kota
@DavidLavieri Смотрите ответ Кристиstackoverflow.com/a/30061326/70345 ниже. Ian Kemp
Это прекрасно работает - спасибо за быстрый ответ. cantera
как насчет всплывающих окон в es6? David Lavieri
45

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

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

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

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

которые ищут ответы с функцией «map» и динамическими данными, вот рабочий пример.

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

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

5

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

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

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

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

208

вам также понадобятся фигурные скобки:

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

лона ES6! Вот пример:

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

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

{`string ${variable} another string`}
0

просто сделайте конкатенацию, как мы делаем в Javascript.

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

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

  }
}

Похожие вопросы