react组件的异步渲染，如何设置全局加载组件？

import React, { Suspense } from 'react';

// 全局加载组件
const GlobalLoading = () => <div>Loading...</div>;

// 高阶组件，将Suspense和加载组件包裹在其中
const withGlobalLoading = (WrappedComponent) => {
  return (props) => (
    <Suspense fallback={<GlobalLoading />}>
      <WrappedComponent {...props} />
    </Suspense>
  );
};

// 使用withGlobalLoading包装需要异步渲染的组件
const MyAsyncComponent = withGlobalLoading(React.lazy(() => import('./MyAsyncComponent')));

// 在其他组件中使用异步渲染的组件
const App = () => (
  <div>
    <MyAsyncComponent />
  </div>
);

export default App;