Languages
[Edit]
PL

React - tablica jako stan komponentu

3 points
Created by:
Reilly-Collier
650

W tym artykule chcieliby┼Ťmy pokaza─ç, jak u┼╝ywa─ç tablic┬ájako┬ástanu w React, a p├│┼║niej wyrenderowa─ç kilka element├│w┬ána bazie tej tablicy.┬á

Najcz─Östszymi problemami┬ápocz─ůtkuj─ůcych u┼╝ytkownik├│w Reacta┬ápodczas pr├│by korzystania z tablic s─ů:

  • brak unikalnego┬áklucza┬ádla ka┼╝dego elementu tablicy,
  • zmodyfikowanie┬átablicy┬ái od┼Ťwie┼╝enie┬ástanu komponentu po modyfikacji.

W tym artykule chcieliby┼Ťmy pokaza─ç Ci 4 podstawowe operacje na tablicach:

  1. renderowanie element├│w na podstawie element├│w tablicy,
  2. dodawanie element├│w,
  3. usuwanie element├│w,
  4. modyfikowanie element├│w.

Uwaga: poni┼╝sze rozwi─ůzania s─ů podsumowaniem najcz─Ö┼Ťciej stosowanych praktyk.

1. Renderowanie elementów na podstawie elementów tablicy - przykład

Bardzo ważne jest to, aby każdy element miał swój unikalny klucz - umożliwia to optymalne wykrywanie zmian w drzewie DOM. Do iteracji po tablicy możemy użyć funkcji map() wbudowanej w JavaScript .

// ONLINE-RUNNER:browser;
// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  return (
    <ul>
      {list.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

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

2. Dodawanie elementów do tablicy - przykład

Aby powiadomi─ç Reacta┬áo zmianie stanu, musimy przekaza─ç do stanu┬áreferencj─Ö inn─ů┬áni┼╝ aktualna. To┬ásprawia, ┼╝e ÔÇőÔÇőmo┼╝emy doda─ç element do tablicy dzi─Öki operacji┬á[...list, newItem], kt├│ra zwracaj─ůca┬ánowy obiekt z tymi samymi elementami).

// ONLINE-RUNNER:browser;

// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  const handleAddClick = () => {
    const number = list.length + 1;
    setList([...list, 'dodano ' + number]);
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleAddClick}>Dodaj element</button>
    </div>
  );
};

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

Pami─Ötaj: u┼╝ywaj─ůc metody list.push() nie zobaczymy ┼╝adnej zmiany komponentu, poniewa┼╝ referencja przechowywana jako stan nie zostanie zmieniona - komponent jest ponownie renderowany tylko po zmianie referencji lub warto┼Ťci w stanie.

3. Usuwanie elementów z tablicy - przykład

Jednym z najprostszych sposobów usunięcia elementów z tablicy i skopiowania ich jest użycie metody filter().

// ONLINE-RUNNER:browser;

// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  const handleRemoveClick = () => {
    setList(list.filter((item, index) => item !== 'dwa'));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Usuń element 'dwa'</button>
    </div>
  );
};

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

4. Modyfikacja elementów w tablicy - przykład

Przy pomocy┬ámetody┬ámap() jeste┼Ťmy w stanie przepisa─ç elementy do nowej tablicy┬ái zmieni─ç w niej┬átylko wybrane pozycje.

// ONLINE-RUNNER:browser;

// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  const handleRemoveClick = () => {
    setList(list.map((item, index) => item === 'dwa' ? 'nowa warto┼Ť─ç w drugim elemencie' : item));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Usuń element 'dwa'</button>
    </div>
  );
};

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

Alternative titles

  1. React - u┼╝ywanie tablic jako stanu
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS (PL)

React - tablica jako stan 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