Languages
[Edit]
PL

React - tablica jako stan komponentu

3 points
Created by:
Reilly-Collier
410

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

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