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

Question

我有一个页面，但它很重，并且反应仍然需要几秒钟来加载所有组件，我想放置一个 z-index 更大的 div 来重叠它。问题：

componentWillMount 在控制台打印 'test'，但不渲染 div：

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

注意 css= 100vw, 100vh, bg: black, color: white

是否可以在另一个组件'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() 的返回值与渲染方法无关。

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

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

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

Show loading icon before first react app initialization

Answer 2

差不多了，谢谢@FelixGaebler

componentWillMount() {
    this.setState({
        flag: true,
    })
}

render() {
    const { classes } = this.props
    if (this.state.flag) {
        return (
            <div className={this.props.classes.modalLoading}>
                <span>TEST</span>
            </div>
        )
    }
    return (
        <div className={classes.root}>
            <LayoutCard {...this.props}/>
        </div>
    )
}

componentDidMount() {
    this.setState({
        flag: false,
    })
}