Töredékek

Egy általános minta a React-ben, hogy egy komponens több elemet ad vissza. A töredékek segítenek gyermekek listáját csoportosítani anélkül, hogy új csomópontot adnál a DOM-hoz.

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

Létezik egy új rövid szintaxis is a deklarálásukhoz.

Motiváció

Komponensek esetében gyakori minta, hogy az gyermekek listájával térjen vissza. Vegyük példának ezt a React kódrészletet:

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

A <Columns />-nak több <td> elemet kell visszaadnia hogy a megjelenített HTML érvényes legyen. Ha egy szülő div-et használunk a <Columns /> komponens render() metódusában, akkor az eredményül kapott HTML érvénytelen lesz.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Helló</td>
        <td>Világ</td>
      </div>
    );
  }
}

a következő <Table /> kimenetet eredményezi:

<table>
  <tr>
    <div>
      <td>Helló</td>
      <td>Világ</td>
    </div>
  </tr>
</table>

A töredékek ezt a problémát oldják meg.

Használat

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>        <td>Helló</td>
        <td>Világ</td>
      </React.Fragment>    );
  }
}

ami a következő helyes <Table /> kimenetet eredményezi:

<table>
  <tr>
    <td>Helló</td>
    <td>Világ</td>
  </tr>
</table>

Rövid szintaxis

Van egy új, rövidebb szintaxis, amit a töredékek deklarálásához használhatsz. Úgy néz ki, mint az üres címkék:

class Columns extends React.Component {
  render() {
    return (
      <>        <td>Helló</td>
        <td>Világ</td>
      </>    );
  }
}

Ugyanúgy használhatod a <></>-t, mint ahogy más elemeket is, azzal a különbséggel, hogy ez nem támogatja a kulcsokat és az attribútumokat.

Kulcsot használó töredékek

A töredékek, amik a <React.Fragment> szintaxissal vannak deklarálva tartalmazhatnak kulcsokat. Ennek az egyik felhasználási módja egy kollekció leképezése töredékek tömbre — például egy leíráslista létrehozására:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 'key' nélkül a React figyelmeztetést fog dobni
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

A key az egyetlen olyan attribútum, amelyet át lehet adni egy Fragment-nek. A jövőben további attribútumok, például eseménykezelők is támogatást kaphatnak.

Élő demó

Ebben a CodePen-ben kipróbálhatod az új JSX töredék szintaxist.