Tất cả câu hỏi

Đáp án đúng: "const Dashboard = React.lazy(() => import('./Dashboard')); ". React.lazy nhận một HÀM không tham số trả về Promise, mà import() động chính là Promise resolve ra module có export default là component; React chỉ gọi hàm này khi Dashboard render lần đầu, và cần bọc Dashboard trong Suspense để có giao diện chờ. "const Dashboard = lazy('./Dashboard');" truyền thẳng chuỗi đường dẫn thay cho hàm, lazy không biết tải gì và báo lỗi khi render. "const Dashboard = React.lazy(import('./Dashboard')); " gọi import() ngay lúc khai báo rồi truyền Promise thay cho hàm, mất tính lười và React cũng báo lỗi vì đối số không phải hàm. "const Dashboard = lazy(() => require('./Dashboard'));" sai vì require nạp module đồng bộ và trả về chính module chứ không phải Promise như lazy cần; require là cú pháp CommonJS nên cũng không tạo chunk tách riêng như import().

Đáp án đúng: "By using the shorthand syntax <>...</> or <React.Fragment>...</React.Fragment> ". Một component chỉ được trả về một phần tử gốc, nên khi cần trả về nhiều phần tử anh em ta bọc chúng bằng Fragment; Fragment gom nhóm trong JSX nhưng không sinh thêm nút nào trong DOM. Cú pháp rút gọn là cặp thẻ rỗng, còn dạng đầy đủ React.Fragment cần dùng khi phải gắn key, chẳng hạn trong vòng map. "By wrapping the JSX elements with <div> tags" sai vì bọc bằng div cũng thoả yêu cầu một gốc nhưng thêm một nút DOM thừa, có thể phá bố cục như bảng hay flex, và đó chính là điều Fragment sinh ra để tránh. "By creating a separate component for each element" sai vì tách component không giải quyết việc gom nhiều phần tử về một gốc. "By using the fragment() function" sai vì React không có hàm fragment nào như vậy; Fragment là một component dùng dưới dạng thẻ.

Đáp án đúng: "function Greeting({ isAdmin }) {

return ( <> <h1>Welcome!</h1> {
  isAdmin && <p>You have administrative privileges.</p>
}

</> ); }". Trong JSX, cặp ngoặc nhọn mở chế độ biểu thức JavaScript; biểu thức isAdmin && thẻ p trả về thẻ p khi isAdmin là true, còn khi isAdmin là false nó trả về false và React không hiển thị gì, nên lời chào luôn hiện còn dòng thông báo quyền chỉ hiện với quản trị viên. Lưu ý nếu vế trái là số 0 thì React sẽ in ra số 0, nên vế trái nên là boolean. Phương án viết "</h1> isAdmin && <p> " thiếu ngoặc nhọn, nên chữ isAdmin && trở thành văn bản thường hiện thẳng ra màn hình, còn thẻ p luôn được render bất kể isAdmin. Cách viết "{isAdmin ? <p> " xuất hiện ở hai phương án có nội dung giống hệt nhau và đều sai cú pháp: toán tử ba ngôi bắt buộc có nhánh sau dấu hai chấm, thiếu nó trình biên dịch báo lỗi; muốn dùng ba ngôi thì phải thêm nhánh null, còn câu hỏi yêu cầu dùng toán tử &&.

Đáp án đúng: "<Suspense fallback={ <Loading /> }> <MyComponent /> </Suspense>". Suspense nhận đúng một prop tên fallback chứa phần tử hiển thị trong lúc một component con, như component tạo bằng lazy, đang tải; component cần chờ phải nằm BÊN TRONG Suspense dưới dạng con. "<Suspense loading={ <Loading /> }> <MyComponent /> </Suspense>" sai tên prop: Suspense không có prop loading nên không hiện giao diện chờ nào. "<Suspense wait={ <Loading /> }> <MyComponent /> </Suspense>" cũng sai tên prop, wait không tồn tại trên Suspense. "<Suspense fallback={ <Loading /> } loading={ <MyComponent /> } />" có fallback đúng nhưng nhét MyComponent vào một prop lạ thay vì làm con; Suspense tự đóng không có con nên MyComponent không bao giờ được render.

Đáp án đúng: "

<Route path="/user/:userId/post/:postId" component={
  UserPost
}
/>

". Trong React Router, mỗi đoạn đường dẫn bắt đầu bằng dấu hai chấm là một tham số động (URL parameter); mẫu này khớp URL như /user/7/post/42 và cho userId là 7, postId là 42, đọc ra bằng useParams (hoặc match.params ở bản cũ). Prop component là cú pháp React Router v5, ở v6 viết bằng prop element, nhưng cách khai báo tham số giống hệt. "

<Route path="/user/userId/post/postId" component={
  UserPost
}
/>

" thiếu dấu hai chấm nên userId và postId chỉ là chữ cố định, chỉ khớp đúng chuỗi đó. "

<Route path="/user/:userId/:postId" component={
  UserPost
}
/>

" cũng hợp lệ về cơ chế vì vẫn khai báo đúng hai tham số, chỉ bỏ đoạn post nên URL thành /user/7/42; đáp án chọn mẫu có đoạn post vì đường dẫn lồng tài nguyên như vậy rõ nghĩa hơn. "

<Route path="/user?userId/post?postId" component={
  UserPost
}
/>

" sai vì dấu chấm hỏi trong URL mở đầu query string, không khai báo tham số đường dẫn.