在呈现页面之前加载 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

嗯，这不是反应的工作方式:) 它呈现从 render() 方法 return 编辑的 JSX。componentWillMount() 的 return 值与呈现方法无关。

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

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

如果您指的是字体、样式表和图像之类的东西... 好吧，这是

的副本

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

在呈现页面之前加载 Div (React)

Loading Div before render Page (React)

html

javascript

lifecycle

components

reactjs