如何在React中挂载所有组件之前拥有加载屏幕

import React, { Component } from 'react';

// 创建Loading组件
const Loading = () => (
  <div className="loading">
    {/* 加载动画或加载信息 */}
    <h2>Loading...</h2>
  </div>
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true // 初始状态为true，显示加载屏幕
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ loading: false }); // 模拟加载完成后隐藏加载屏幕
    }, 2000);
  }

  render() {
    const { loading } = this.state;

    return (
      <div>
        {/* 根据loading标志决定是否显示Loading组件 */}
        {loading ? <Loading /> : <div>其他组件</div>}
      </div>
    );
  }
}

export default App;