Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập cuối kỳ số 1
50 câu trắc nghiệm kèm lời giải của môn FER202 - Phát triển web Front-End với React, xếp đúng thứ tự trong đề. Trang 3/3 — câu 41–50.
Danh sách câu hỏi
import React from 'react';
import Button from 'react-bootstrap/Button';
function Demo() {
return (
<Button variant="primary">
);
}
export default Demo;import React from 'react';
import Button from 'react-bootstrap/Button';
function Demo() {
return (
<button variant="primary"> Primary Button</button>
);
}
export default Demo;import React from 'react';
import Button from 'react-bootstrap/Button';
function Demo() {
return (
<Button variant="primary">Primary Button</Button>
);
}
export default Demo;import React from 'react';
import Button from 'react-bootstrap/Button';
function Demo() {
return (
<button variant="primary"/>
);
}
export default Demo;Đáp án đúng: "import React from 'react'; import Button from 'react-bootstrap/Button'; function Demo() {
return ( <Button variant="primary">Primary Button</Button> );} export default Demo;". Component Button phải được import từ react-bootstrap/Button rồi dùng đúng tên viết hoa Button, có thẻ mở và thẻ đóng bao lấy nội dung; khi đó prop variant="primary" được React-Bootstrap đổi thành lớp btn btn-primary và chữ Primary Button hiện trên nút màu xanh. Phương án chứa "<Button variant="primary">);" sai cú pháp JSX: thẻ mở Button không có thẻ đóng mà cũng không tự đóng, nên trình biên dịch báo lỗi ngay. Phương án chứa "
<button variant="primary"> Primary Button</button>" dùng thẻ button HTML viết thường chứ không phải component đã import, nên variant chỉ là thuộc tính lạ và nút hiện ra không có kiểu Bootstrap. Phương án chứa "<button variant="primary"/> " vừa là thẻ HTML thường vừa tự đóng, không có chữ bên trong, nên chỉ ra một nút trống không kiểu dáng.
Đáp án đúng gồm hai ý: "Fragments allow you to group multiple elements without adding an extra node to the DOM." và "Fragments are particularly useful
for avoiding unnecessary <div> elements, which can clutter your markup.".Một component chỉ trả về được một phần tử gốc; React.Fragment, hay cú pháp rút gọn <></>, gom nhiều phần tử con thành một nhóm nhưng khi commit vào DOM thì không sinh ra thẻ bao nào, nên tránh được các thẻ div thừa làm rối markup và làm hỏng bố cục flex, grid hay cấu trúc bảng tr, td. Hai ý này là hai mặt của cùng một công dụng. "Fragments allow you to provide CSS styling to multiple elements." sai vì Fragment không tạo nút DOM nên không có chỗ gắn className hay style; Fragment chỉ nhận prop key. "Fragments allow you to handle state management in React." sai vì quản lý state là việc của useState, useReducer hay Context, Fragment không giữ state nào.
Đáp án đúng: "const handleClick = () => { dispatch({ type: 'BUTTON_CLICKED' }); };
<button onClick={
handleClick
}
>Click me</button>;". Trong Redux, action là một object thuần bắt buộc có thuộc tính type, và ta gửi nó tới store bằng dispatch; để làm việc đó khi bấm nút, ta định nghĩa hàm handleClick gọi dispatch rồi truyền chính tham chiếu hàm đó cho onClick, để React chỉ gọi nó khi sự kiện click xảy ra. Cách viết onClick={() => handleClick()} cũng chạy được, nhưng chỉ bọc thêm một hàm mũi tên thừa, tạo hàm mới ở mỗi lần render mà không đem lại gì khi không cần truyền tham số, nên không phải cách trực tiếp mà câu hỏi muốn. Cách viết onClick={handleClick()} sai vì dấu ngoặc khiến hàm bị gọi ngay trong lúc render: dispatch chạy mỗi lần render, store đổi, component render lại và dễ thành vòng lặp, còn onClick nhận giá trị trả về undefined nên bấm nút không làm gì. Cách viết dispatch({ action: 'BUTTON_CLICKED' }) sai vì object thiếu thuộc tính type, Redux sẽ báo lỗi action có type undefined và reducer không nhận ra được action này.
useStateuseEffectuseDispatchuseContext