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: "By wrapping it in {}". Trong JSX, cặp ngoặc nhọn là cửa sổ để quay về JavaScript: bất kỳ biểu thức nào đặt trong đó, như một biến, phép tính, lời gọi hàm hay toán tử ba ngôi, đều được tính và chèn kết quả vào giao diện, ví dụ {user.name} hay {count + 1}; ngoặc nhọn dùng được cả trong nội dung thẻ lẫn làm giá trị thuộc tính. "By adding js: before it" sai vì JSX không có tiền tố js nào, viết vậy chỉ ra chữ thường trên màn hình. "By using () only" sai vì ngoặc tròn trong JSX chỉ dùng để nhóm, chẳng hạn bọc khối JSX nhiều dòng sau return, chúng không biến chữ bên trong thành biểu thức JavaScript. "By

using {
  {
  }
}

" sai vì cặp ngoặc đôi không phải cú pháp riêng: ngoặc ngoài là ngoặc nhúng biểu thức, ngoặc trong là một đối tượng JavaScript, như khi viết style={{ color: 'red' }}, nên nó chỉ là một trường hợp của cách dùng {}.

Đáp án đúng: "To define functions with a shorter syntax". Arrow function (hàm mũi tên) của ES6 ra đời trước hết để viết hàm gọn hơn: bỏ từ khoá function, có thể bỏ ngoặc khi chỉ có một tham số và bỏ return khi thân là một biểu thức, rất tiện cho callback như map, filter hay hàm xử lý sự kiện trong React. "To create self-executing functions" sai vì hàm tự gọi (IIFE) viết được bằng cả function thường lẫn hàm mũi tên, đó không phải mục đích của cú pháp này. "To declare asynchronous functions" sai vì hàm bất đồng bộ được khai báo bằng từ khoá async từ ES2017, áp dụng cho cả hai kiểu hàm. "To bind the value of this inside a function" là điểm dễ gây tranh cãi: hàm mũi tên đúng là không có this riêng mà dùng this của phạm vi bao ngoài, nhờ vậy tránh phải gọi bind trong class component; nhưng đó là đặc điểm đi kèm, không phải ràng buộc this, vì bind, call hay apply đều không đổi được this của nó, và câu hỏi hỏi mục đích chung nên cú pháp ngắn gọn là đáp án được chọn.

Đáp án đúng: "const Child = ({ name, age }) => {

return <div>{
  name
}

, {age}</div>; };". Function component nhận props là một đối tượng, nên có thể phân rã (destructure) ngay trong danh sách tham số: hàm nhận thẳng hai biến name và age, thân hàm chỉ còn trả về JSX hiển thị chúng. Phương án chứa "(props) => { const { name, age } = props;" cũng là destructuring hợp lệ và chạy đúng, nhưng làm thành một bước riêng trong thân hàm qua biến props trung gian, không phải cách phân rã props tại tham số mà câu hỏi nhắm tới. Phương án chứa "const name = props.name; const age = props.age;" chỉ gán từng thuộc tính bằng dấu chấm, hoàn toàn không dùng destructuring. Phương án chứa "({ props }) => {" phân rã lấy khoá tên props từ đối tượng props, mà đối tượng đó không có khoá này nên biến props là undefined và câu lệnh phân rã kế tiếp ném TypeError.

Đáp án đúng: "Using props directly in the element prop". Trong React Router v6, Route nhận prop element là một phần tử JSX dựng sẵn, nên muốn truyền props cho component được route render thì viết thẳng chúng vào phần tử đó, ví dụ element={

<Profile user={
  currentUser
}
/>

}, giống hệt khi dùng component ở bất kỳ đâu. Phương án "By manually passing props via useParams" sai vì useParams chỉ đọc tham số động trên URL như id trong /users/:id, không phải kênh truyền props tùy ý. Phương án "By using component prop" là cách của React Router v5, cách này không cho truyền props trực tiếp và đã bị bỏ ở v6. Phương án "Props are passed automatically in React Router" sai vì ở v6 router không tự bơm props như history, match vào component nữa; các thông tin đó lấy bằng hook như useNavigate, useLocation, useParams.