Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập cuối kỳ số 3
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 2/3 — câu 21–40.
Danh sách câu hỏi
Đáp án đúng: "<Child name="John" /> ". Props được truyền giống thuộc tính HTML: tên thuộc tính trong JSX chính là tên khoá trong object props mà component con nhận, nên viết name bằng chuỗi John thì bên trong Child đọc được props.name có giá trị John, hoặc phân rã tham số thành name. "<Child prop="name" value="John" /> " sai vì nó tạo hai prop có tên prop và value, con sẽ nhận props.prop là chuỗi name và props.value là John chứ không có prop name nào. "<Child propName="name" propValue="John" /> " sai vì React không có quy ước tách tên và giá trị thành hai thuộc tính như vậy; con chỉ nhận hai prop propName và propValue. "<Child data="John" /> " sai vì giá trị John được gửi dưới tên data, nên trong con phải đọc props.data, còn props.name vẫn là undefined.
function.class.const.component.Đáp án đúng: "useState is used for managing simple state, while useReducer is used for complex state and state transitions.". useState hợp với state đơn giản và độc lập như một số, một chuỗi hay một cờ bật tắt; useReducer gom mọi cách chuyển trạng thái vào một hàm reducer(state, action), hợp khi state là đối tượng nhiều trường liên quan hoặc giá trị kế tiếp phụ thuộc giá trị trước theo nhiều loại hành động. "useState is a built-in Hook, while useReducer is a custom Hook." sai vì cả hai đều là hook có sẵn của React, import trực tiếp từ gói react. "useState is used for class components, while useReducer is used for functional components." sai vì không hook nào dùng được trong class component; cả hai chỉ dành cho function component. "useState is for local component state, while useReducer is for global application state." nhầm: cả hai đều tạo state cục bộ của component; muốn chia sẻ cho toàn ứng dụng thì phải kết hợp useReducer với Context hoặc dùng Redux.
Đáp án đúng: "const value = useContext(MyContext);". useContext là hook nhập từ react, nhận đối tượng context đã tạo bằng createContext và trả về giá trị của Provider gần nhất phía trên trong cây; nếu không có Provider nào thì trả về giá trị mặc định truyền cho createContext, và component sẽ render lại khi giá trị đó đổi. "const value = MyContext.useContext(); " sai vì đối tượng context chỉ có các thuộc tính như Provider và Consumer, không có phương thức useContext. "const value = useContextProvider(MyContext);" sai vì React không có hook tên useContextProvider; Provider là component dùng để cung cấp giá trị chứ không phải hook để đọc. "const value = MyContext.useContextProvider(); " sai vì cả phương thức lẫn tên gọi đó đều không tồn tại trên đối tượng context.
ReactAngularDjangoVue.jsconst person = { name: 'John', age: 30 };
const { _______ } = person;
console.log(name, age);Đáp án đúng: "<Card> ". Trong React-Bootstrap, Card là hộp nội dung có viền, gồm các phần con như Card.Img cho ảnh, Card.Body làm thân, Card.Title cho tiêu đề và Card.Text cho đoạn văn, nên rất hợp để gom tiêu đề, nội dung và hình ảnh của một mục thành một khối, ví dụ thẻ sản phẩm hay thẻ bài viết. "<Container> " là khung bố cục ngoài cùng của hệ lưới, canh lề và giới hạn bề ngang trang, không mang sẵn cấu trúc tiêu đề, thân, ảnh. "<Form> " dùng để dựng biểu mẫu nhập liệu cùng Form.Group, Form.Control. "<Alert> " hiển thị thông báo phản hồi ngắn như thành công, cảnh báo, lỗi, không phải hộp trình bày nội dung theo nhóm.
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.
class="form-control" in your <input> element?Đáp án đúng: "By using the .modal class along with the data-bs-toggle="modal" attribute.". Modal trong Bootstrap 5 là một khối div mang lớp .modal, bên trong có .modal-dialog, .modal-content, .modal-header, .modal-body, và được mở bằng plugin JavaScript có sẵn: nút kích hoạt mang thuộc tính data-bs-toggle với giá trị modal cùng data-bs-target trỏ tới id của modal, Bootstrap tự gắn sự kiện, hiện lớp phủ nền và quản lý tiêu điểm. "By using the <modal> HTML element." sai vì HTML không có thẻ modal; thẻ gốc gần nhất là dialog nhưng Bootstrap không dựa vào nó. "By applying the .modal class to the container element." chưa đủ, chỉ có lớp mà không có thuộc tính kích hoạt hay lời gọi JavaScript thì modal vẫn ẩn mãi. "By using JavaScript to dynamically create and show modal elements." là cách tự dựng tay; Bootstrap cho mở modal bằng lời gọi bootstrap.Modal rồi show, nhưng cách tạo modal tiêu chuẩn vẫn là cấu trúc .modal kèm data-bs-toggle.