javascript - change - React JSX: Access Props in Quotes

reactjs render props

Question

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

Por ejemplo:

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

La salida HTML resultante es:

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

Answer 1

Aquí está la mejor opción para los nombres de clase o los apoyos dinámicos, solo haga una concatenación como lo hacemos en Javascript.

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

Answer 2

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

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

Al igual que con todos los demás componentes de JavaScript dentro de JSX, use cadenas de plantillas 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`}

Answer 3

Las mejores prácticas son agregar el 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.

Answer 4

Nota: en reaccionar puedes poner la expresión javascript dentro de un corchete. Podemos usar esta propiedad en este ejemplo.
Nota: dé un vistazo al 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>
      );

  }
}

Answer 5

Para Personas, en busca de respuestas sobre la función ''mapear'' y los datos dinámicos, este es un ejemplo práctico.

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

Esto da a la URL como " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (ejemplo aleatorio)

Answer 6

React (o JSX) no admite la interpolación de variables dentro de un valor de atributo, pero puede poner cualquier expresión JS entre llaves como el valor de atributo completo, así que esto funciona:

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

Answer 7

Si desea utilizar los literales de la plantilla de es6, también necesita llaves alrededor de las marcas de verificación:

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

Answer 8

Si estás usando JSX con Harmony, puedes hacer esto:

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

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