Languages
[Edit]
PL

React - jak zwróci─ç wiele elementów z komponentu

0 points
Created by:
Jun-L
413

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 );

ReactJS (PL)

React - jak zwróci─ç wiele elementów z komponentu
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join