首页 文章

组件在第一次渲染时没有样式的简短渲染

提问于
浏览 次
1

当我打开我的反应应用程序时，下面的组件闪烁 width:100% ，可能是因为它从material-ui卡继承了它 .

在我的反应应用程序中，有很多这些组件被渲染，每个组件都有自己的宽度，这些组件基于父组件的数据 . 我使用基于道具的内联样式设置宽度 .

据我所知，组件在创建时具有内联样式，应用它不应有任何延迟 . 但是，在应用给定的内联样式之前，我会看到所有 SceneThumb 组件的宽度为100％，只有几分之一秒 .

如果我改变 scene-thumb-parent 的css以包含一些宽度，例如10％，那么在应用内联样式之前，我会在10分钟内看到它们全部只有10％ . 这让我觉得应用内联css有一个延迟，但它确实困扰我..

是否应该做出反应？或者一般的HTML？有没有办法减少这种内联样式应用程序延迟？也许这与我从 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;

scene-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;
}
css reactjs

1 回答

  • 1

    width prop最初为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>
  );
}
    回复于

相关问题