Компонент вкратце визуализируется без стилей при первом рендере

Когда я открываю свое приложение для реагирования, компонент ниже мигает с width:100%, вероятно, потому, что он наследует его от материальной карты ui.Компонент вкратце визуализируется без стилей при первом рендере

В моем приложении-ответнике представлено много этих компонентов, каждая из которых имеет свою собственную ширину, которые основаны на данных родительского компонента. Я устанавливал ширину с встроенным стилем на основе реквизита.

Как я понимаю, компонент имеет встроенный стиль, поскольку он создан, и его применение не должно задерживаться. Однако я вижу все компоненты SceneThumb со 100% шириной в течение доли секунды, прежде чем применять данный встроенный стиль.

Если я изменю css scene-thumb-parent, чтобы включить некоторую ширину, например, 10%, то я увижу их всех с 10% в течение доли секунды, прежде чем применяется встроенный стиль. Это заставляет меня думать, что есть задержка в применении встроенного css, но это действительно озадачивает меня.

Ожидаете ли вы реагирования? Или html вообще? Есть ли способ уменьшить эту задержку приложения в стиле встроенного стиля? Может быть, это как-то связано с настройкой горячей перезагрузки Dev, которую я получаю от create-react-app?

SceneThumb.js(код, который не имеет отношения к вопросу был опущен):

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;

сцены thumb.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; 
}

источник

2017-01-13 Bernardo Ferreira Bastos Braga

Я предполагаю, что здесь, что ширина опоры первоначально 'null' или некоторое другое значение. Добавьте 'console.log (this.props.width)' вверху вашего 'render()' и опубликуйте вывод. – Chris

Пожалуйста, покажите свой родительский компонент, возможно, возможно, @Chris имеет право –

@ Крис вы его получили. Это была проблема с вычислением ширины на основе продолжительности видео. если видео не было загружено, я использовал нуль как продолжительность, и это привело к делению на ноль при вычислении ширины. Не могли бы вы написать ответ, чтобы я мог принять его? Или, может быть, это недостаточно общее, и я должен просто удалить вопрос? –

width опора является первоначально null или какое-либо другое значение. Через мгновение обновляется опора, которая запускает другой рендер. Вот почему вы видите вспышку, о которой говорите.

Вы можете проверить это, добавив следующие строки в render() функции:

console.log(this.props.width)

Вы, вероятно, увидеть его регистрации, по крайней мере в два раза с разными значениями.

Есть много способов исправить это. То, что имеет наибольшее значение, будет зависеть от остальной части приложения и ваших личных предпочтений. Несмотря на это, вот один путь:

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> 
); 
}

источник

2017-01-13 17:48:34 Chris

Компонент вкратце визуализируется без стилей при первом рендере

ответ

Смежные вопросы