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

Đáp án đúng: "

<h2> {
  userName
}
</h2>

". Trong JSX, cặp ngoặc nhọn mở một chỗ chứa biểu thức JavaScript: biểu thức bên trong được tính lúc render và giá trị của nó được chèn vào làm nội dung văn bản của thẻ, nên đặt biến userName trong ngoặc nhọn ngay giữa thẻ h2 sẽ hiện ra tên người dùng hiện tại và tự đổi theo khi biến mang giá trị mới. Phương án "

<h2> <p>{
  userName
}
</p> </h2>

" cũng hiện được tên nhưng lồng thêm một thẻ p không cần thiết vào tiêu đề, mà p là phần tử khối, đặt trong h2 là HTML không hợp lệ vì h2 chỉ nhận nội dung dạng chữ. Phương án "<h2> "userName" </h2> " thiếu ngoặc nhọn nên JSX coi đó là chữ thường và in nguyên văn cả tên biến lẫn dấu nháy chứ không đọc giá trị biến. Phương án "

<h2>{
  userName: "John"
}
</h2>

" sai vì cặp ngoặc nhọn ngoài cùng là chỗ chứa biểu thức, mà userName: "John" không phải một biểu thức JavaScript hợp lệ nên trình biên dịch báo lỗi cú pháp, và dù có chạy thì nó cũng gán cứng một tên chứ không hiển thị biến động.

Đáp án đúng: "const value = useContext(MyContext);". Hook useContext nhận chính đối tượng context được tạo bởi createContext và trả về giá trị của Provider gần nhất phía trên component trong cây; khi giá trị Provider đổi, component đang đọc nó sẽ render lại. Vì vậy trong function component ta gọi useContext(MyContext) ở cấp cao nhất của hàm rồi gán kết quả vào biến. Phương án "const value = MyContext();" gọi đối tượng context như một hàm, nhưng context là đối tượng chứ không phải hàm nên sẽ ném lỗi TypeError. Phương án "const value = this.context(MyContext); " mượn cách của class component, nhưng ở class this.context là một thuộc tính (dùng cùng static contextType) chứ không phải hàm để gọi, và function component cũng không có this. Phương án "

<MyContext.Provider useContext={
  value
}
/>

" là phía cung cấp chứ không phải phía đọc: Provider nhận giá trị qua prop value, không có prop tên useContext, và viết vậy không đọc được gì vào component.

Đáp án đúng: "Using <Route path="/" element={ <Home> } />". Trong React Router v6, mỗi tuyến đường được khai báo bằng component Route với hai prop chính: path là đường dẫn URL cần khớp và element là phần tử React sẽ hiển thị khi URL khớp; các Route này đặt bên trong Routes. "Using <Link path="/" element={ <Home> } />" sai vì Link dùng để tạo liên kết điều hướng (sinh ra thẻ a) và nhận prop to chỉ đích đến, nó không khai báo tuyến đường nào. "Using <Routes path="/" element={ <Home> } />" sai vì Routes là bộ chứa, nó duyệt các Route con và chọn tuyến khớp nhất với URL hiện tại, bản thân nó không nhận path hay element. "Using

<context path="/">
</context>
<suspense>

</home>" sai vì đây không phải component nào của React Router: context và suspense viết thường bị JSX hiểu là thẻ HTML, thẻ đóng home còn không có thẻ mở tương ứng nên đoạn này không biên dịch được.