Languages
[Edit]
PL

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

3 points
Created by:
Blythe-F
560

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┼╝

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