Cuando abro mi aplicación de reacción, el siguiente componente parpadea con width:100% , probablemente porque lo hereda de la tarjeta material-ui.
En mi aplicación de reacción, se representan muchos de estos componentes, cada uno con su propio ancho que se basa en los datos del componente principal. Configuré el ancho con un estilo en línea basado en los accesorios.
Según tengo entendido, el componente tiene el estilo en línea tal como se crea y no debería haber demora para aplicarlo. Sin embargo, veo todos los componentes de SceneThumb con un ancho del 100 % durante una fracción de segundo, antes de que apliquen el estilo en línea dado.
Si cambio el css de scene-thumb-parent para incluir algo de ancho, digamos 10% por ejemplo, los veré todos con 10% por una fracción de segundo, antes de que se aplique el estilo en línea. Eso me hace pensar que hay un retraso en la aplicación de CSS en línea, pero realmente me desconcierta.
¿Es esto de esperarse de reaccionar? ¿O de html en general? ¿Hay alguna forma de reducir este retraso de la aplicación de estilo en línea? ¿Tal vez tenga algo que ver con la configuración de recarga en caliente del desarrollador que obtengo de create-react-app ?
SceneThumb.js (se ha omitido el código que es irrelevante para la pregunta):
import React, { Component } from 'react'; import './scene-thumb.css'; import Card from 'material-ui/Card'; class SceneThumb extends Component { render() { return ( <div className='scene-thumb-parent' style={{width:this.props.width, left:this.props.left}} > <Card className={this.props.selected?'scene-thumb-selected':'scene-thumb'} > <span> Hello world! </span> </Card> </div> ); } } export default SceneThumb;escena-pulgar.css:
.scene-thumb-parent { position:relative; text-overflow:clip; white-space:nowrap; overflow:hidden; min-width: 12px; } .scene-thumb-selected { border: 2px solid red; border-radius: 5px; } .scene-thumb,.scene-thumb-selected { padding: 2px; margin:2px; position:relative; }La propiedad de width es inicialmente nula o algún otro valor. Un momento después, el accesorio se actualiza, lo que activa otro renderizado. Es por eso que estás viendo el flash del que estás hablando.
Puede probar esto agregando lo siguiente a su función render() :
console.log(this.props.width)Probablemente verá que se registra al menos dos veces con valores diferentes.
Hay muchas maneras de arreglar esto. Lo que tenga más sentido dependerá del resto de la aplicación y de su preferencia personal. Independientemente, aquí hay una manera:
render() { if(!this.props.width) return null; //if it's null, render nothing. return ( <div className='scene-thumb-parent' style={{width:this.props.width, left:this.props.left}}> <Card className={this.props.selected?'scene-thumb-selected':'scene-thumb'}> <span>Hello world!</span> </Card> </div> ); }