Accede a accesorios dentro de comillas en React JSX


295

En JSX, ¿cómo hace referencia a un valor propsdesde dentro de un valor de atributo citado?

Por ejemplo:

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

El resultado HTML resultante es:

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

Respuestas:


476

React (o JSX) no admite la interpolación de variables dentro de un valor de atributo, pero puede colocar cualquier expresión JS dentro de llaves como todo el valor de atributo, por lo que esto funciona:

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

26
¿Qué pasa con los backtips en es6?
David Lavieri

1
@DavidLavieri Vea la respuesta de Cristi stackoverflow.com/a/30061326/70345 a continuación.
Ian Kemp


47

Si está utilizando JSX con Harmony, puede hacer esto:

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

Aquí estás escribiendo el valor de srccomo una expresión.


1
Esto es algo difícil de encontrar. y para contenedores reutilizables esto es algo que debe saber
holms

2
Solo para que la gente no se confunda con la mención de Harmony, esto es parte del estándar ES6 , mientras que la respuesta está fechada unos meses antes de que se convirtiera en un estándar.
Сергей Гринько

12

¡En lugar de agregar variables y cadenas, puede usar las cadenas de plantilla ES6! Aquí hay un ejemplo:

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

Como para todos los demás componentes de JavaScript dentro de JSX, use cadenas de plantilla dentro de llaves. Para "inyectar" una variable, use un signo de dólar seguido de llaves que contengan la variable que desea inyectar. Por ejemplo:

{`string ${variable} another string`}

8

Las mejores prácticas son agregar un método getter para eso:

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

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

Luego, si tiene más lógica más adelante, puede mantener el código sin problemas.



1

Nota: en react puedes poner la expresión javascript dentro de un paréntesis. Podemos usar esta propiedad en este ejemplo.
Nota: mire el siguiente ejemplo:

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

Aquí está la mejor opción para Dynamic ClassName o Props, solo haga una concatenación como lo hacemos en Javascript.

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

Recomiendo el classnamespaquete de usos para construir
clases

1

puedes usar

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

o

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

o

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.