Cách trả về nhiều phần tử trong JSX

Cách giải quyết hạn chế mà JSX gặp phải khi phải trả về nhiều phần tử từ một thành phần

Khi viết JSX trong React, có một lưu ý: bạn phải trả về một mục mẹ. Không nhiều hơn một.

Ví dụ, điều này là không thể:

const Pets = () => {
  return (
    <Dog />
    <Cat />
  )
}

Một cách "cổ điển" để giải quyết vấn đề này là bọc các thành phần và các phần tử HTML khác trong mộtdiv:

const Pets = () => {
  return (
    <div>
      <Dog />
      <Cat />
    </div>
  )
}

Tuy nhiên, điều này dẫn đến một vấn đề - có một phần tử HTML được giới thiệu chỉ để làm cho JSX của chúng ta hoạt động, không cần thiết trong HTML kết quả, nhưng đó là nơi nó kết thúc.

Một giải pháp là trả về một mảng các phần tử JSX:

const Pets = () => {
  return [
      <Dog />,
      <Cat />
  ]
}

Một giải pháp khác là sử dụng Fragment, một tính năng React tương đối mới có thể giải quyết vấn đề cho chúng tôi:

const Pets = () => {
  return (
    <Fragment>
      <Dog />
      <Cat />
    </Fragment>
  )
}

nó hoạt động giống nhưdivphần tử chúng tôi đã thêm trước đây, nhưng nó sẽ không xuất hiện trong HTML kết quả được hiển thị cho trình duyệt. Đôi bên cùng có lợi.

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: