Fraqmentlər

React-də ümumi pattern çoxlu elementlərə komponentin qayıtması üçündür. Fraqmentlər sizə DOM-a nodelar əlavə etmədən uşaqların siyahısını qruplaşdırmağa imkan verir.

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

Burada həmçinin onları bəyan etmək üçün yeni qısa sintaksis var.

Motivasiya

Komponentlərdə uşaqlar siyahısını qaytarmaq çox işlənən bir patterndir. React-in kod parçası misalına baxın:

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

Render edilmiş HTML-in etibarlı olması üçün <Columns /> çoxsaylı <td> elementlərinə qayıtmalı ola bilərlər. Əgər valideyn div <Columns />-un render()-inin daxilində istifadə olunubsa, onda nəticələnən HTML etibarsızdır.

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

yekun <Table /> nəticəsi:

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

Fraqmentlər bu problemi həll edir.

İstifadə

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

hansıki düzgün <Table /> nəticəsi ilə yekunlaşacaq:

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

Qısa Sintaksis

Fraqmentləri bəyan etmək üçün yeni qısa sintaksis istifadə edə bilərsiniz. Bu boş təqlərə bənzəyir:

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

Siz <></> digər elementləri işlətdiyiniz üsulla istifadə edə bilərsiniz, yalnız bu açarları və atributları dəstəkləmir.

Açarlı Fraqmentlər

Açıq <React.Fragment> sintaksisi ilə bəyan olunmuş fraqmentlərin açarları ola bilər. Buna misal kolleksiyanın fraqmentlər massivi ilə uzlaşdırılması ola bilər — məsələn, təsvir siyahısının yaratmaq:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // `key`-siz React açar xəbərdarlığı göndərəcək
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

key tək atributdur ki, Fragment-ə ötürülə bilər. Gələcəkdə biz dəstək üçün hadisə işləyiciləri kimi əlavə atributlar əlavə edə bilərik.

Live Demo

Siz yeni JSX fraqment sintaksisini CodePen ilə yoxlaya bilərsiniz.

Is this page useful?Bu səhifəni redaktə edin