Estoy usando SlateJS y necesito retrasar el regreso de <img src={imgSrc} /> hasta que imgSrc sea un valor definido (se está leyendo como un DataURL desde un blob)

¿Hay alguna manera de hacer esto?

Sé que esto no funciona (y que esto no es sabio), pero en teoría podría hacer algo como :

return setTimeout(function() {return <img src={imgSrc} />, 1000)

1
Slbox 14 ene. 2017 a las 22:25

3 respuestas

La mejor respuesta

Si desea renderizar la imagen inmediatamente después de definir el valor de la imagen, intente lo siguiente:

Enfoque 1: use una función de orden superior que tome la imgSrc prop de la siguiente manera <ImageComponent imgSrc={} />

const ImageComponent = ({ imgSrc }) => {
    if (!imgSrc) {
        return <span></span>
    } else {
        return <img src={imgSrc} />
    }
}

Enfoque 2: renderice un código en línea justo donde estaba ejecutando su declaración de devolución.

{ this.props.imgSrc && <img src={imgSrc} />}

El código anterior es bastante bueno, lo que hace es representar el elemento img si el prop imgSrc está definido, de lo contrario no hace nada. Es reactivo, por lo que cuando cambia el imgSrc, el elemento vuelve a aparecer.

Espero que haya ayudado.

1
Ally Jr 14 ene. 2017 a las 19:51

Si conoce la propiedad o el valor que está esperando, puede simplemente return null en la función de representación cuando la condición no es correcta. Por ejemplo.

const ImgComponent = React.createClass({
  render() {
    if (!this.props.imgSrc) {
      return null
    }
    return (
      <img src={this.props.imgSrc} />
    )
  }
})
0
FabioCosta 14 ene. 2017 a las 19:37

Haces un trazador de líneas como:

{ (imgSrc !== null) && <img src={imgSrc} /> }

Esto solo devolverá un <img> si `imgSrc no es nulo, de lo contrario se comportará como si el código nunca existiera, y todo lo demás se procesará.

0
A. Lau 15 ene. 2017 a las 03:31