So erstellen Sie eine wiederverwendbare Tabellenkomponente mit Go und React

Mit zunehmender Komplexität von Webanwendungen sind Tabellen zu einem der notwendigen Bestandteile vieler Webanwendungen geworden. Der Bau eines leistungsstarken und wartungsfreundlichen Tisches erfordert jedoch einen erheblichen Zeit- und Arbeitsaufwand. Um dieses Problem zu lösen, können wir die Sprache Go und React verwenden, um eine wiederverwendbare Tabellenkomponente zur Verwendung in mehreren Projekten zu erstellen.

In diesem Artikel stellen wir vor, wie Sie Tabellenkomponenten mithilfe der Go-Sprache und React erstellen, sodass Sie sie problemlos in Ihren Projekten wiederverwenden können.

1. Verstehen Sie die Grundlagen der Tabellenkomponente.

Bevor wir mit der Erstellung der Tabellenkomponente beginnen, müssen wir einige grundlegende Konzepte verstehen. Die Tabellenkomponente besteht normalerweise aus den folgenden Teilen:

• Kopfzeile: Zeigt den Titel der Spalte an.
• Zeile: Jede Zeile enthält eine Gruppe von Zellen. Die Daten in Zellen können Text, Zahlen, Bilder usw. sein.
• Spalten: Jede Spalte enthält eine Gruppe von Zellen. Eine Spalte beschreibt normalerweise ein Attribut oder Daten in einer Tabelle.

2. Go-Sprache und React installieren

Wenn Sie Go-Sprache und React noch nicht installiert haben, installieren Sie sie bitte zuerst. Sie können sie über die folgenden Links herunterladen und installieren:

• Go-Sprache: https://golang.org/
• React: https://reactjs.org/

Nachdem die Installation abgeschlossen ist, stellen Sie bitte sicher, dass Ihre Go-Version Mindestens 1.11 und Ihre React-Version ist mindestens 16.x.

3. Erstellen Sie eine grundlegende Tabellenkomponente.

Jetzt erstellen wir eine grundlegende Tabellenkomponente. Wir werden eine Komponente mit React erstellen und die Daten im Hintergrund mit der Go-Sprache verarbeiten. Zuerst müssen wir in der Befehlszeile ein neues Go-Sprachprojekt erstellen:

$ mkdir my-table-app
$ cd my-table-app
$ go mod init my-table-app

Dann müssen wir eine neue React-Komponente im Projekt erstellen. Führen Sie im Stammverzeichnis des Projekts den folgenden Befehl aus:

$ npx create-react-app my-table-app
$ cd my-table-app

Nachdem wir nun ein React-Projekt erstellt haben, schreiben wir eine grundlegende Tabellenkomponente. Erstellen Sie eine Datei mit dem Namen „Table.js“ im src-Verzeichnis. In dieser Datei schreiben wir Code zum Erstellen einer Basistabelle.

import React from 'react';

function Table(props) {
  return (
    <>
      <table>
        <thead>
          <tr>
            {props.columns.map(column => (
              <th>{column}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {props.rows.map(row => (
            <tr>
              {Object.values(row).map(value => (
                <td>{value}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

export default Table;

In dieser Komponente erhalten wir zwei Eigenschaften: Spalten und Zeilen. Das Attribut columns ist ein Array, das die Titel aller Spalten in der Tabelle enthält, und das Attribut rows ist ein Array, das die Daten aller Zeilen in der Tabelle enthält. In der Komponente verwenden wir die Funktion „map()“, um diese Daten zu durchlaufen und sie in einer Tabelle darzustellen.

4. Schnittstelle zur Tabellendatenerfassung implementieren

Als nächstes müssen wir eine Schnittstelle in der Go-Sprache implementieren, um Tabellendaten zu erhalten. In der Go-Sprache können wir das Gin-Framework verwenden, um auf einfache Weise eine RESTful-API zu erstellen. Zuerst müssen wir das Gin-Framework im Projekt installieren. Führen Sie den folgenden Befehl in der Befehlszeile aus:

$ go get -u github.com/gin-gonic/gin

Erstellen Sie dann eine Datei mit dem Namen „main.go“ im Stammverzeichnis des Projekts und schreiben Sie den folgenden Code:

package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

type Row struct {
    ID       int
    Name     string
    Age      int
    Location string
}

var rows = []Row{
    {1, "John", 28, "New York"},
    {2, "Jane", 32, "Chicago"},
    {3, "Mary", 24, "San Francisco"},
    {4, "Bob", 41, "Miami"},
}

func main() {
    r := gin.Default()

    r.GET("/api/rows", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H{
            "rows": rows,
        })
    })

    r.Run(":8080")
}

In dieser Datei definieren wir eine Datei mit dem Namen „Zeilenstruktur“, die enthält vier Attribute: ID, Name, Alter und Standort. Dann definieren wir ein Array rows, das die Daten aller Zeilen in der Tabelle enthält. Als Nächstes haben wir eine API-Schnittstelle namens „/api/rows“ erstellt, die Daten für alle Zeilen zurückgibt, wenn die Anfrage eintrifft. Schließlich haben wir unseren API-Dienst mit der Methode r.Run(":8080") gestartet.

5. Verwenden von Tabellenkomponenten in React

Jetzt haben wir das Schreiben der Tabellenkomponente und der Datenerfassungsschnittstelle abgeschlossen. Lassen Sie uns sie zusammenfügen, um eine vollständige Tabellenanwendung zu implementieren. Führen Sie zunächst den folgenden Befehl im Stammverzeichnis des React-Projekts aus, um Axios- und React Table-Komponentenbibliotheken zu installieren:

$ npm install axios react-table

Dann müssen wir eine Datei mit dem Namen „App.js“ im src-Verzeichnis erstellen und den folgenden Code schreiben:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Table from './Table';
import './App.css';
import 'react-table/react-table.css';

function App() {
  const [columns, setColumns] = useState([]);
  const [rows, setRows] = useState([]);

  useEffect(() => {
    axios.get('/api/rows').then(response => {
      setColumns(Object.keys(response.data.rows[0]));
      setRows(response.data.rows);
    });
  }, []);

  return (
    <div className="App">
      <h1>My Table App</h1>
      <Table columns={columns} rows={rows} />
    </div>
  );
}

export default App;

In dieser Komponente verwenden wir die Hooks useState() und useEffect(), um den Status der Komponente zu verwalten. In useEffect() verwenden wir die Axios-Bibliothek, um eine GET-Anfrage an unsere API-Schnittstelle zu senden und die Antwortdaten in der Callback-Funktion auf den Zustand der Komponente zu setzen. Schließlich rendern wir die Tabelle auf der Seite, indem wir diese Statusdaten an die zuvor erstellte Tabellenkomponente übergeben.

6. Fazit

In diesem Artikel haben wir eine wiederverwendbare Tabellenkomponente mit der Go-Sprache und React erstellt und eine einfache Webanwendung erstellt, um sie zu präsentieren. Mithilfe dieser Techniken können wir Tabellenkomponenten problemlos wiederverwenden und den Zeit- und Arbeitsaufwand für das Schreiben von Tabellencode in verschiedenen Projekten reduzieren. Wenn Sie mehr über die Go-Sprache und React erfahren möchten, lesen Sie bitte die offizielle Dokumentation.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine wiederverwendbare Tabellenkomponente mit Go und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!