Languages
[Edit]
PL

React - jak stworzy─ç dynamiczn─ů tabel─Ö

3 points
Created by:
Dirask Community
6360

W tym artykule chcieliby┼Ťmy pokaza─ç wam, jak stworzy─ç┬ádynamiczn─ů tabel─Ö┬áw┬áReact.

Poniższy przykład składa się z kilku kroków:

  1. Stworzenie dynamicznej tabeli na podstawie tablicy,
  2. Każda tabela składa się z nagłówka i rekordów danych,
  3. Nag┼é├│wek jest zwykle sta┼éy i zachowuje t─Ö sam─ů liczb─Ö kolumn,
  4. Tworz─ůc rekordy danych korzystamy z funkcji┬ámap(). Jest to dobre podej┼Ťcie aby przekonwertowa─ç elementy tablicy na elementy React.

Uwaga:

Pami─Ötaj, ┼╝e ka┼╝dy element powinien posiada─ç unikalny klucz - pomaga to Reactowi optymalnie zarz─ůdza─ç zmianami w drzewie DOM.┬áTakim kluczem mo┼╝e by─ç na przyk┼éad identyfikator┬áid┬áprzypisany do ka┼╝dego z element├│w┬átablicy.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX.
// import React from 'react';
// import ReactDOM from 'react-dom';

const tableStyle = {
    border: '1px solid black',
    borderCollapse: 'collapse'
}

const tdStyle = {
  	border: '1px solid black',
};

const App = () => {
  	const students = [
       { id: 1, name: 'Tomek',  age: 22 },
       { id: 2, name: 'Adam', age: 43 },
       { id: 3, name: 'Marek', age: 16 },
       { id: 4, name: 'Jacek', age: 29 }
    ];
    return (
      <div>
        <table style={tableStyle}>
          <tbody>
            <tr>
              <th style={tdStyle}>Id</th>
              <th style={tdStyle}>Imi─Ö</th>
              <th style={tdStyle}>Wiek</th>
            </tr>
            {students.map(({ id, name, age }) => (
              <tr key={id}>
                <td style={tdStyle}>{id}</td>
                <td style={tdStyle}>{name}</td>
                <td style={tdStyle}>{age}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
};

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

Przykład dynamicznego komponentu tabeli

W tej sekcji chcieliby┼Ťmy pokaza─ç, jak stworzy─ç┬ákomponent, kt├│ry wy┼Ťwietla dane zmieniaj─ůce si─Ö po klikni─Öciu.

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX.
// import React from 'react';
// import ReactDOM from 'react-dom';

const tableStyle = {
  border: '1px solid black',
  borderCollapse: 'collapse'
}

const tdStyle = {
  border: '1px solid black',
};

const Table = ({students}) => (
<div>
  <table style={tableStyle}>
    <tbody>
      <tr>
        <th style={tdStyle}>Id</th>
        <th style={tdStyle}>Imi─Ö</th>
        <th style={tdStyle}>Wiek</th>
      </tr>
      {students.map(({ id, name, age }) => (
        <tr key={id}>
          <td style={tdStyle}>{id}</td>
          <td style={tdStyle}>{name}</td>
          <td style={tdStyle}>{age}</td>
        </tr>
      ))}
    </tbody>
  </table>
</div>
);

const GROUP_1 = [
  { id: 1, name: 'Tomek',  age: 22 },
  { id: 2, name: 'Adam', age: 43 },
  { id: 3, name: 'Marek', age: 16 },
  { id: 4, name: 'Jacek', age: 29 }
];

const GROUP_2 = [
  { id: 1, name: 'Kasia', age: 23 },
  { id: 2, name: 'Ania',  age: 18 }
];

const App = () => {
  const [students, setStudents] = React.useState(GROUP_1);
  return (
    <div>
      <div>
        <button onClick={() => setStudents(GROUP_1)}>Poka┼╝ GRUPE_1</button>
        <button onClick={() => setStudents(GROUP_2)}>Poka┼╝ GRUPE_2</button>
      </div>
      <br />
      <Table students={students} />
    </div >
  );
};

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

Zobacz te┼╝

ReactJS (PL)

React - jak stworzy─ç dynamiczn─ů tabel─Ö
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