props.children là gì và dùng khi nào?

props.children chứa mọi thứ bạn đặt giữa thẻ mở và thẻ đóng của một component. Nó là prop bình thường, chỉ khác ở chỗ JSX tự điền giá trị cho nó thay vì bạn viết tay.

// Nơi dùng
<Modal>
  <h2>Xác nhận xoá</h2>
  <p>Hành động này không hoàn tác được.</p>
</Modal>

// Bên trong Modal
function Modal({ children }) {
  return (
    <div className="modal-backdrop">
      <div className="modal-body">{children}</div>
    </div>
  )
}

Hai đoạn dưới đây tương đương nhau — cho thấy children không có gì đặc biệt về mặt cơ chế:

<Modal children={<p>Xin chào</p>} />
<Modal><p>Xin chào</p></Modal>

Giá trị của mẫu này là đảo ngược quyền quyết định. Modal lo phần khung, lớp nền mờ, khoá cuộn trang và phím Escape; nó không cần biết bên trong có gì. So với việc truyền title và body thành hai prop riêng, children cho phép nơi dùng đặt bất cứ thứ gì mà không phải sửa Modal thêm một prop mới mỗi lần có yêu cầu mới.

Khi cần nhiều "chỗ trống" thay vì một, đừng cố tách children ra — hãy nhận element qua props riêng:

<Layout sidebar={<Nav />} footer={<Footer />}>
  <Article />
</Layout>

Lưu ý: Đừng dựa vào việc children là mảng.

• Với một con nó là một element, với nhiều con mới là mảng, và với biểu thức thì có thể là null.
• Cần duyệt qua thì dùng React.Children.map — hàm này xử lý đủ mọi hình dạng.