React - jak zwrócić wiele elementów z komponentu

W tym artykule chcielibyśmy pokazać, jak zwrócić wiele elementów z komponentu w Reakcie.

Poniższe przykłady pokazują dwa sposoby:

1. Zwrócenie tablicy elementów,
2. Używając React.Fragment.

1. Wykorzystanie tablicy

Wystarczy zwrócić tablicę komponentów.

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => [
  <p key="1">element React</p>,
  <p key="2">element React</p>,
  <p key="3">element React</p>,
];

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Uwaga: 
Dla każdego z elementów musimy przypisać wartość key - klucze pomagają Reactowi w optymalny sposób zarządzać zmianami DOM.

2. Wykorzystanie React.Fragment

React przedstawił prosty sposób tworzenia elementów, które nie są dodawane do ostatecznego DOM - nazywa się to fragmentami.

Poniżej praktyczne przykłady:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => (
  <>
    <p>element React</p>
    <p>element React</p>
    <p>element React</p>
  </>
);

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

lub

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => (
  <React.Fragment>
    <p>element React</p>
    <p>element React</p>
    <p>element React</p>
  </React.Fragment>
);

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );