React 实现 动态加载组件

React 实现 动态加载组件

import { Button } from 'antd'
import React, { useState, lazy, Suspense } from 'react'

//这个地方动态加载组件
const Item = lazy(() => import('./Module.jsx'))

export function Test() {
  const [showPreview, setShowPreview] = useState(false)
  return (
    <div>
      <Button onClick={() => setShowPreview(true)}>ShowPreview</Button>
      {showPreview && (
        <Suspense fallback={<></>}>
          <Item />
        </Suspense>
      )}
    </div>
  )
}

./Module.jsx

export default function Module() {
  return (
    <>
      test
    </>
  )
}