Languages
[Edit]
DE

React - wie erstellt man eine dynamische Tabelle

3 points
Created by:
Nikki
10460

In diesem Beitrag wird gezeigt, wie man eine dynamische Tabelle in React erstellen kann. 

Das folgende Beispiel besteht aus mehreren Schritten:

  1. Das Erstellen einer dynamischen Tabelle aus Basis eines Arrays,
  2. Jede Tabelle besteht aus einer Kopfzeile und Datenansätzen,
  3. Die Kopfzeile ist meist fest und hat immer die gleiche Anzahl von Spalten,
  4. Beim Erstellen von Datenansätze soll man die Funktion map() verwenden. Das ist ein guter Lösungsweg, um Array-Elemente in React-Elemente zu konvertieren.

Hinweis:

Man kann nicht vergessen,¬†dass jedes Element einen eigenen Schl√ľssel¬†haben soll, weil es hilfreich in React ist, √Ąnderungen am DOM-Baum optimal zu verwalten.¬†So ein Schl√ľssel kann z.B.¬†id¬†sein, die jedem Element des Arrays zugeordnet ist.

Lauffähiges Beispiel:

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.
// 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: 'Thomas',  age: 22 },
       { id: 2, name: 'Adam', age: 43 },
       { id: 3, name: 'Markus', age: 16 },
       { id: 4, name: 'Jack', age: 29 }
    ];
    return (
      <div>
        <table style={tableStyle}>
          <tbody>
            <tr>
              <th style={tdStyle}>Id</th>
              <th style={tdStyle}>Vorname</th>
              <th style={tdStyle}>Alter</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 );

Ein Beispiel f√ľr eine dynamische Tabellenkomponente¬†

In diesem Abschnitt wird gezeigt, wiem man eine Komponente erstellen kann, die Daten anzeigt, die sich beim Anklicken ändern.

// ONLINE-RUNNER:browser;

// Uwaga: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.
// 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}>Vorname</th>
        <th style={tdStyle}>Alter</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: 'Thomas',  age: 22 },
  { id: 2, name: 'Adam', age: 43 },
  { id: 3, name: 'Markus', age: 16 },
  { id: 4, name: 'Jack', age: 29 }
];

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

const App = () => {
  const [students, setStudents] = React.useState(GROUP_1);
  return (
    <div>
      <div>
        <button onClick={() => setStudents(GROUP_1)}>GRUPPE_1 anzeigen</button>
        <button onClick={() => setStudents(GROUP_2)}>GRUPPE_2 anzeigen</button>
      </div>
      <br />
      <Table students={students} />
    </div >
  );
};

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

Siehe auch

ReactJS (DE)

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