How do you wrap a lazy-loaded component with a fallback in React?

4 phương ánCó giải thích

Các phương án trả lời

Chọn một phương án
Lời giảiChọn phương án để mở

Đáp án đúng: "<Suspense fallback={ <div>Loading...</div> }> <LazyComponent /> </Suspense>". Component nạp lười bằng React.lazy phải nằm trong ranh giới Suspense; trong lúc tệp mã của nó còn đang tải, React hiển thị thứ được truyền qua prop fallback (ở đây là khối chữ Loading...), tải xong thì thay bằng LazyComponent. Phương án chứa "<Suspense loader=" sai vì Suspense không có prop loader, React bỏ qua nó, nên trong lúc chờ không có giao diện chờ nào được chỉ định. Phương án chứa "<Await fallback=" nhầm sang component Await của React Router, dùng để chờ một promise trả về từ loader; nó không bọc component lazy và cũng không nhận prop fallback. Phương án chứa "<Loading fallback=" dùng một component không có sẵn trong React; dù tự định nghĩa component Loading, nó cũng không bắt được trạng thái tạm treo khi tải mã như Suspense.

Cùng phần 7

Xuất hiện trong 1 bộ đề