Languages
[Edit]
DE

Wie kann man eine benutzerdefinierte dynamische Tabelle in React erstellen?

3 points
Created by:
Nikki
9920

Hallo, alle zusammen!┬á👋┬á😊

In der letzten Woche hatte ich ein Problem mit der Erstellung einer dynamischen Tabelle in React, und so dachte ich, dass jetzt vielleicht diese L├Âsung jemandem helfen kann.

Das Endergebnis dieser L├Âsung:

React - Beispiel f├╝r eine dynamische Tabelle
React - Beispiel f├╝r eine dynamische Tabelle

Das folgende Beispiel besteht aus mehreren Schritten:

  1. Die dynamische Tabelle wurde auf Basis einer Array erstellt,
  2. Jede Tabelle besteht aus einer Kopfzeile und Datenans├Ątzen,
  3. Die Kopfzeile ist fest und hat immer die gleiche Anzahl von Spalten,
  4. Beim Erstellen der Datenans├Ątze wurde die Funktion┬ámap()┬áverwendet, um die Array-Elemente in React-Elemente zu konvertieren.

Vergiss nicht, 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',
    textAlign: 'center',
    width: '100%'
}

const tdStyle = {
  	border: '1px solid #85C1E9',
    background: 'white',
    padding: '5px'
};

const thStyle = {
  	border: '1px solid #3498DB',
    background: '#3498DB',
  	color: 'white',
    padding: '5px'
};

const App = () => {
  	const students = [
        { id: 1, name: 'Thomas', age: 25, favFruit: '🍏' },
        { id: 2, name: 'Adam', age: 43, favFruit: '🍌' },
        { id: 3, name: 'Markus', age: 16, favFruit: '🍊' },
        { id: 4, name: 'Jack', age: 29, favFruit: '🍒' }
    ];
    return (
      <div>
        <table style={tableStyle}>
          <tbody>
            <tr>
              <th style={thStyle}>Id</th>
              <th style={thStyle}>Vorname</th>
              <th style={thStyle}>Alter</th>
              <th style={thStyle}>Lieblingsfrucht</th>
            </tr>
            {students.map(({ id, name, age, favFruit }) => (
              <tr key={id}>
                <td style={tdStyle}>{id}</td>
                <td style={tdStyle}>{name}</td>
                <td style={tdStyle}>{age}</td>
                <td style={tdStyle}>{favFruit}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
};

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

Hinweis:

Falls du mehr ├╝ber dynamischen Tabellen erfahren m├Âchtest, klicke┬ádiesen Artikel. 😊

Siehe auch

ReactJS - Blog berichten (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