Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập thi lại số 1

Đáp án đúng: "

<Child onClick={
  handleClick
}
/>

". Để truyền hàm làm prop, đặt chính tham chiếu hàm trong ngoặc nhọn, không kèm dấu gọi hàm; Child nhận prop onClick và tự gọi nó khi có sự kiện, chẳng hạn gắn vào nút bên trong. Tên onClick theo quy ước đặt tên prop sự kiện là on cộng tên sự kiện. Cần nói thẳng: "

<Child handleClick={
  handleClick
}
/>

" cũng truyền đúng một hàm, chỉ khác tên prop, và trong Child dùng props.handleClick vẫn chạy; nó không sai về cơ chế, chỉ lệch quy ước đặt tên prop sự kiện mà đáp án này theo. "

<Child onClick={
  handleClick()
}
/>

" sai vì có dấu ngoặc tròn nên handleClick bị gọi ngay mỗi lần cha render, prop nhận giá trị trả về chứ không phải hàm, và nếu hàm đổi state sẽ gây vòng render vô hạn. "

<Child handleClick={
  handleClick()
}
/>

" mắc cùng lỗi gọi hàm ngay khi render, chỉ khác tên prop.

Đáp án đúng: "Use the <Route> component with nested <Route> components". Trong React Router v6, tuyến lồng nhau được khai báo bằng cách đặt các Route con bên trong một Route cha; path của Route con được nối tiếp vào path của cha, và component của Route cha đặt Outlet ở chỗ muốn hiển thị nội dung của tuyến con đang khớp. "Utilize the <Switch> component to handle nested routes" sai vì Switch là component của React Router v5 và đã bị thay bằng Routes ở v6; hơn nữa Switch chỉ chọn tuyến đầu tiên khớp chứ không tự tạo cấu trúc lồng. "Implement a routing table using an array of route objects" chỉ đúng trong hoàn cảnh khác: v6 cho khai báo mảng đối tượng có thuộc tính children qua useRoutes hoặc createBrowserRouter, nhưng câu hỏi hỏi cách định nghĩa cấu trúc lồng bên trong component cha bằng JSX, và cách được dạy là Route lồng Route. "Direct routes using query parameters in URL path names" sai vì query string (phần sau dấu ?) chỉ mang dữ liệu đọc bằng useSearchParams, không tham gia khớp tuyến nên không tạo được cấu trúc lồng.

Đáp án đúng: "By using the bind method when binding the event handler". Hàm xử lý sự kiện được React gọi với một đối số là đối tượng sự kiện, nên muốn truyền thêm dữ liệu như id của dòng được nhấp thì phải tạo trước một hàm mới đã gắn sẵn đối số đó; Function.prototype.bind làm đúng việc này, ví dụ onClick={

handleDelete.bind(null, id)
}

sẽ gọi handleDelete(id, event). Cách tương đương hay gặp hơn là hàm mũi tên onClick={() => handleDelete(id)}, cùng nguyên lý tạo hàm bọc. "By using the event.target property" sai vì event.target chỉ là phần tử DOM phát ra sự kiện; đọc thuộc tính của nó là cách lấy dữ liệu gián tiếp, không phải truyền đối số. "By using the event.data property" sai vì sự kiện nhấp không có thuộc tính data để chứa đối số tự chọn; data chỉ có ở một số loại sự kiện như sự kiện nhập liệu. "React 19 does not support passing additional arguments to event handlers" sai vì React 19 vẫn cho làm như mọi phiên bản trước.