Хэлтэрхий

React компонент нь олон элементийг харуулахдаа заавал багц байдлаар буцаах шаардлагатай. Харин Фрагмент нь нэмэлт DOM нүдний шаардлагагүйгээр олон элементийг нэг багц болгон харуулдаг.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Мѳн тэдгээрийг зарлах шинэ богиносгосон хувилбар байдаг.

Сэдэл

Компонент нь олон элементийг жагсаалт болгон харуулдаг. Доорх React жишээг харъя:

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

<Columns /> нь олон <td> элементийг зѳв HTML харуулахын тулд буцаана. Хэрвээ <Columns /> компонентийн render() функц div ашиглавал харагдах HTML нь буруу гарна.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

<Table /> харагдах үр дүн:

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Фрагмент нь энэ асуудлыг шийднэ.

Хэрэглээ

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>        <td>Hello</td>
        <td>World</td>
      </React.Fragment>    );
  }
}

Ингэснээр зѳв <Table /> үр дүн үзүүлнэ:

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

Богино синтакс

Фрагмент ашиглахдаа шинэ богиносгосон хувилбарыг ашиглаж болно. Яг хоосон таг юм шиг харагдана:

class Columns extends React.Component {
  render() {
    return (
      <>        <td>Hello</td>
        <td>World</td>
      </>    );
  }
}

<></> -ыг яг л бусад элементүүд ашигладаг шиг ашиглана. Гэхдээ энэ нь keys эсвэл бусад аттрибутуудыг дэмжихгүй.

Key-тэй фрагмент

Фрагмент нь <React.Fragment> хэлбэрээр зарлагдсан бол key агуулж болдог. Array -ыг олон фрагмент болгон харуулах гэх мэт нѳхцѳлд ашиглана — жишээ нь:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key нь Фрагментэд авч болох цорын ганц аттрибут юм. Цаашдаа бид бусад аттрибутууд болох event handler мэтийг дэмжих боломжтой болгоно.

Live Demo

Фрагментийг энд туршиж болно. CodePen.