Доступ до реквізитів всередині котирувань у React JSX

Як у JSX ви посилаєтесь на значення propsзсередини процитованого значення атрибута?

Наприклад:

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

Отриманий вихід HTML:

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

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

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

Якщо ви хочете використовувати літерали шаблону es6, вам також потрібні дужки навколо галочок:

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

Якщо ви використовуєте JSX з Harmony, ви можете зробити це:

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

Тут ви пишете значення srcяк вираз.

Замість додавання змінних та рядків, ви можете використовувати рядки шаблону ES6! Ось приклад:

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

Що стосується всіх інших компонентів JavaScript всередині JSX, використовуйте рядки шаблону всередині фігурних дужок. Для "введення" змінної використовуйте знак долара, а потім фігурні дужки, що містять змінну, яку ви хочете ввести. Наприклад:

{`string ${variable} another string`}

Найкращі практики - це додати метод getter для цього:

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

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

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

Для людей, які шукають відповіді wrt на функцію 'map' та динамічні дані, ось робочий приклад.

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

Це дає URL-адресу як " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (випадковий приклад)

Примітка: В реакції ви можете помістити вираз 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>
      );

  }
}

Ось найкращий варіант для Dynamic className або Props, просто зробіть кілька конкатенацій, як у нас у Javascript.

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

ви можете використовувати

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