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

Đáp án đúng: "

<Child name="John" age={
  30
}
/>

". Mỗi prop là một thuộc tính riêng trên thẻ JSX, cách nhau bằng dấu cách; chuỗi đặt trong nháy kép, còn giá trị JavaScript khác như số, boolean hay object đặt trong ngoặc nhọn, nên Child nhận props.name là chuỗi John và props.age là số 30. "<Child name="John" age="30" /> " cũng truyền được hai prop nhưng age thành chuỗi ký tự chứ không phải số, nên phép cộng hay so sánh số trong Child dễ ra kết quả sai. "<Child name="John" age=30 /> " sai cú pháp JSX vì giá trị thuộc tính không phải chuỗi thì bắt buộc nằm trong ngoặc nhọn. "

<Child props={
  {
    name: "John", age: 30
  }
}
/>

" chỉ truyền một prop tên props chứa object, Child phải đọc props.props.name; muốn trải object thành nhiều prop thì dùng cú pháp spread với ba dấu chấm trong ngoặc nhọn.

Đáp án đúng: "

<Route path="/user/:userId/post/:postId" component={
  UserPost
}
/>

". Trong React Router, mỗi đoạn đường dẫn bắt đầu bằng dấu hai chấm là một tham số động (URL parameter); mẫu này khớp URL như /user/7/post/42 và cho userId là 7, postId là 42, đọc ra bằng useParams (hoặc match.params ở bản cũ). Prop component là cú pháp React Router v5, ở v6 viết bằng prop element, nhưng cách khai báo tham số giống hệt. "

<Route path="/user/userId/post/postId" component={
  UserPost
}
/>

" thiếu dấu hai chấm nên userId và postId chỉ là chữ cố định, chỉ khớp đúng chuỗi đó. "

<Route path="/user/:userId/:postId" component={
  UserPost
}
/>

" cũng hợp lệ về cơ chế vì vẫn khai báo đúng hai tham số, chỉ bỏ đoạn post nên URL thành /user/7/42; đáp án chọn mẫu có đoạn post vì đường dẫn lồng tài nguyên như vậy rõ nghĩa hơn. "

<Route path="/user?userId/post?postId" component={
  UserPost
}
/>

" sai vì dấu chấm hỏi trong URL mở đầu query string, không khai báo tham số đường dẫn.

Đáp án đúng: "<Route path="/home" element={ <Home /> } />". React Router v6 đổi cách khai báo tuyến: Route nhận prop element với giá trị là một phần tử React đã viết sẵn, tức <Home />, và các Route phải nằm trong Routes; nhờ truyền phần tử thay vì tham chiếu component, ta có thể truyền prop trực tiếp như

<Home user={
  user
}
/>

. "

<Route path="home" component={
  Home
}
/>

" sai vì prop component là cú pháp của React Router v5, đã bị bỏ ở v6 nên Route không hiển thị gì. "

<Route path="/home" render={
  () => <Home />

} />" sai vì prop render cũng thuộc v5, dùng để truyền hàm trả về phần tử, v6 thay hẳn bằng element. "

<Route component={
  Home
}
path="/home" />

" sai vì thứ tự prop không quan trọng trong JSX, vấn đề vẫn là prop component của v5 không còn được v6 hỗ trợ.