Tengo una tarea: hacer un precargador hasta que se carguen todas las imágenes. Así que usamos reaccionar, y soy nuevo en este marco, necesito ayuda porque no puedo hacer los pasos lógicos correctos. Tenemos App.js y este archivo no tiene ningún img a cambio de solo componentes, entonces, ¿cómo obtener información de las imágenes que han cargado? Sé sobre onLoad, pero no entiendo cómo obtener este bool de onLoad que está en componentes.
Hay varias formas de hacer esto, pero la más simple es mostrar la imagen final oculta y luego voltearla para que sea visible una vez que se carga.
class Foo extends React.Component { constructor(){ super(); this.state = {loaded: false}; } render(){ return ( <div> {this.state.loaded ? null : <div style={{ background: 'red', height: '400px', width: '400px', }} /> } <img style={this.state.loaded ? {} : {display: 'none'}} src={this.props.src} onLoad={() => this.setState({loaded: true})} /> </div> ); } }Nunca he tenido que lidiar con esto, pero hay una manera (que podría ser un poco complicada).
Básicamente, puede usar un useEffect que está integrado en React. Esto se utiliza en los componentes funcionales. Esencialmente, ejecuta comandos después de que la página se haya montado. Lo que puede intentar es establecer inicialmente un estado booleano (por ejemplo: isLoading ) para que sea true y luego ejecutar un comando para establecer este estado en false en el gancho useEffect .
function MyComponent(){ // Create an instance of react's useState hook const [isLoading, setIsLoading] = useState(true); // This will run after the page has mounted React.useEffect(() => { setIsLoading(false); }, [setIsLoading]); return{ //... } }