ReactJS: import full động

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>
  )
}