Fragment

Fragment là một cách để chúng ta tránh sử dụng các parent element không cần thiết.

Context

Chẳng hạn xét ví dụ sau:

function Skills() {
  return (
    <div className="unnecessary-parent-element">
      <p>HTML</p>
      <p>CSS</p>
      <p>JS</p>
    </div>
  )
}
 
function App() {
  return (
    <div>
      <Skills />
    </div>
  )
}

Có thể thấy, không nhất thiết phải dùng một element lớn bao bên ngoài các thẻ <p> ở trong component Skills.

Usage

Ta có thể dùng component Fragment từ package react nhằm thay thế cho parent element không cần thiết như sau:

import React from "react"
 
function Skills() {
  return (
    <React.Fragment>
      <p>HTML</p>
      <p>CSS</p>
      <p>JS</p>
    </React.Fragment>
  )
}

Trong giao diện được render ra, chỉ có thẻ <p> được render.

Trong những phiên bản gần đây của React, ta có thể sử dụng cặp thẻ rỗng <></> để thay thế cho <Fragment></Fragment>:

function Skills() {
  return (
    <>
      <p>HTML</p>
      <p>CSS</p>
      <p>JS</p>
    </>
  )
}

Resources

• Fragment - React