Spread operator trong JSX props được dùng như thế nào?

Cú pháp spread {...props} cho phép truyền toàn bộ các thuộc tính của một object JavaScript làm các props riêng lẻ cho một component.

Ví dụ:

const btnProps = { color: "blue", disabled: true, type: "submit" };

// Sử dụng spread:
<Button {...btnProps} />

// Nó hoàn toàn tương đương với việc viết thủ công:
<Button color="blue" disabled={true} type="submit" />

Khi nào nên dùng:
- Rất hữu ích khi xây dựng các component wrapper (như Modal, Layout, Input custom) cần "forward" (chuyển tiếp) mọi props thừa (rest props) xuống thẻ HTML thực tế bên dưới.

Cảnh báo:
Cần cẩn thận khi dùng vì nó làm luồng dữ liệu trở nên mờ nhạt (implicit), bạn có thể vô tình rò rỉ (leak) những props không mong muốn xuống DOM gây ra lỗi cảnh báo của React.