PL
React - jak zwrócić wiele elementów z komponentu
0 points
W tym artykule chcielibyśmy pokazać, jak zwrócić wiele elementów z komponentu w Reakcie.
Poniższe przykłady pokazują dwa sposoby:
- Zwrócenie tablicy elementów,
- Używając
React.Fragment.
Wystarczy zwrócić tablicę komponentów.
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const App = () => [6
<p key="1">element React</p>,7
<p key="2">element React</p>,8
<p key="3">element React</p>,9
];10
11
const root = document.querySelector('#root');12
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.
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:
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const App = () => (6
<>7
<p>element React</p>8
<p>element React</p>9
<p>element React</p>10
</>11
);12
13
const root = document.querySelector('#root');14
ReactDOM.render(<App />, root );lub
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const App = () => (6
<React.Fragment>7
<p>element React</p>8
<p>element React</p>9
<p>element React</p>10
</React.Fragment>11
);12
13
const root = document.querySelector('#root');14
ReactDOM.render(<App />, root );