Acessar objetos dentro de aspas no React JSX

No JSX, como você faz referência a um valor propsde dentro de um valor de atributo entre aspas?

Por exemplo:

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

A saída HTML resultante é:

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

React (ou JSX) não suporta interpolação de variáveis ​​dentro de um valor de atributo, mas você pode colocar qualquer expressão JS dentro de chaves como o valor inteiro do atributo, portanto, isso funciona:

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

Se você deseja usar os literais do modelo es6, também precisa de chaves entre as marcas de escala:

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

Se você estiver usando JSX com Harmony, poderá fazer o seguinte:

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

Aqui você está escrevendo o valor de srccomo uma expressão.

Em vez de adicionar variáveis ​​e strings, você pode usar as strings do modelo ES6! Aqui está um exemplo:

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

Como para todos os outros componentes JavaScript dentro do JSX, use cadeias de modelo dentro de chaves. Para "injetar" uma variável, use um cifrão seguido de chaves contendo a variável que você deseja injetar. Por exemplo:

{`string ${variable} another string`}

As práticas recomendadas são adicionar o método getter para isso:

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

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

Então, se você tiver mais lógica posteriormente, poderá manter o código sem problemas.

Para as Pessoas, procurando respostas escritas para a função 'mapear' e dados dinâmicos, aqui está um exemplo de trabalho.

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

Isso fornece o URL como " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (exemplo aleatório)

Nota: No react, você pode colocar a expressão javascript dentro de colchetes. Podemos usar essa propriedade neste exemplo.
Nota: dê uma olhada no exemplo abaixo:

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

  }
}

Aqui está a melhor opção para Dynamic className ou Props, apenas faça alguma concatenação como fazemos em Javascript.

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

você pode usar

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

ou

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

ou

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }