javascript - 在渲染页面之前加载 Div (React)

Question

我有一个页面，但它很重，并且 react 仍然花费几秒钟来加载所有组件，我想放置一个具有更大 z-index 的 div 来重叠它。问题:

componentWillMount 在控制台上打印“test”，但不渲染 div:

componentWillMount() {
    return (
        <div className={this.props.classes.modalLoading}>
            TESTE
        </div>
    )
}

注意 css= 100vw，100vh，bg:黑色，颜色:白色

是否可以在另一个组件“Loader”中进行肢解以在其他地方使用？ (控制台日志不起作用)

render() {
    const { classes } = this.props
    return (
        <div className={classes.root} ref={'oi'}>
            <LayoutCard {...this.props}/>
        </div>
    )
}

componentDidMount() {
    {console.log('teste 3')}
}

Answer 1

好吧，这不是 React 的工作原理:) 它渲染从 render() 方法返回的 JSX。componentWillMount() 的返回值与 render 方法无关。

如果你想要一个加载器，你应该在主组件上设置一个状态，以便在返回(返回加载器 div)和返回(返回页面内容)之间进行交换。我不确定你所说的“ react ”中的“加载”是什么意思。也许有同步ajax的东西？完成后设置一个状态。

if(this.state.loaded) {
    return <Loader />
} else {
    return <Content />
}

如果你指的是字体、样式表和图像之类的东西...... 好吧，那是它的副本

Show loading icon before first react app initialization