ReactJS: import full động

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Webpack chấp nhận import full động, bạn có thể sử dụng chúng để tạo component có thể tải và tái sử dụng được.

import loadable from '@loadable/component'

const AsyncPage = loadable(props => import(`./${props.page}`))

function MyComponent() {
  return (
    <div>
      <AsyncPage page="Home" />
      <AsyncPage page="Contact" />
    </div>
  )
}

Sử dụng thuộc tính động

Nếu bạn sử dụng plugin Babel, các thuộc tính động được hỗ trợ ngay lập tức. Nếu không, bạn phải thêm chức năng cacheKey: nó lấy prop và trả về một key cache.

import loadable from '@loadable/component'

const AsyncPage = loadable(props => import(`./${props.page}`), {
  cacheKey: props => props.page,
})

function MyComponent() {
  const [page, setPage] = useState('Home')
  return (
    <div>
      <button onClick={() => setPage('Home')}>Go to home</button>
      <button onClick={() => setPage('Contact')}>Go to contact</button>
      {page && <AsyncPage page={page} />}
    </div>
  )
}
» Tiếp: Suspense
« Trước: Tách thư viện
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!