Question

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

componentWillMount打印＆＃39; test＆＃39;在控制台上，但不渲染div：

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

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

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

它可能会在另一个组件中被肢解＆＃39; Loader＆＃39;在其他地方使用？（控制台日志不起作用）

service_cost

Answer 1

嗯，这不是反应的方式:) 它呈现从render()方法返回的JSX .. componentWillMount()的返回值与render方法无关。

如果你想要一个加载器，你应该在主组件上设置一个状态，以在返回一个返回装载器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,
    })
}

在渲染页面之前加载Div（React）

2 个答案: