如何使用Go語言和React建立可重複使用的表格元件-Golang-PHP中文網

如何使用Go語言和React建立可重複使用的表格元件

王林

發布： 2023-06-17 17:34:40

原創

1179 人瀏覽過

隨著Web應用程式的複雜性不斷增加，表格已經成為了許多網路應用程式的必備元件之一。但是，如果要建立一個功能強大且易於維護的表格，需要投入大量的時間和精力。為了解決這個問題，我們可以使用Go語言和React來建立一個可重複使用的表格元件，以便在多個專案中使用。

在本文中，我們將介紹如何使用Go語言和React建立表格元件，讓你能夠輕鬆地在專案中重複使用它們。

了解表格元件的基礎

在開始建立表格元件之前，我們需要先了解一些基本概念。表格元件通常由以下幾個部分組成：

表頭：顯示列的標題
#行：每一行都包含了一組儲存格。單元格中的資料可以是文字、數字或圖像等。
列：每一列都包含了一組儲存格。列通常描述了表格中的某個屬性或資料。

安裝Go語言和React

如果你還沒有安裝Go語言和React，請先安裝它們。你可以從以下連結下載並安裝它們：

Go語言：https://golang.org/
React：https://reactjs.org/

安裝完成後，請確保你的Go版本不低於1.11，並且你的React版本不低於16.x。

建立一個基本的表格元件

現在，讓我們建立一個基本的表格元件。我們將使用React建立一個元件，並使用Go語言在背景處理資料。首先，我們需要在命令列中建立一個新的Go語言專案：

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

登入後複製

然後，我們需要在專案中建立一個新的React元件。在專案的根目錄下，執行以下指令：

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

登入後複製

現在我們已經建立了一個React項目，接下來讓我們寫一個基本的表格元件。在src目錄下建立一個名為「Table.js」的檔案。在這個文件中，我們將編寫程式碼來建立一個基本的表格。

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;

登入後複製

在這個元件中，我們接收兩個屬性：columns和rows。其中columns屬性是一個包含了表格中所有欄位的標題的數組，rows屬性則是包含了表格中所有行的資料的陣列。在元件中，我們使用map()函數來遍歷這些數據，並將它們渲染到表格中。

實作表格資料取得介面

接下來，我們需要在Go語言中實作一個接口，用來取得表格資料。在Go語言中，我們可以使用gin框架來輕鬆地建立RESTful API。首先，我們需要在專案中安裝gin框架。在命令列中執行以下命令：

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

登入後複製

然後，在專案根目錄下建立一個名為「main.go」的文件，並寫入以下程式碼：

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")
}

登入後複製

在這個文件中，我們定義了一個名為Row的結構體，它包含了ID、Name、Age和Location四個屬性。然後，我們定義了一個陣列rows，它包含了表格中所有行的資料。接下來，我們創建了一個名為“/api/rows”的API接口，它將在請求到達時返回所有行的資料。最後，我們使用r.Run(":8080")方法啟動了我們的API服務。

在React中使用表格元件

現在，我們已經完成了表格元件和資料取得介面的編寫。讓我們將它們放在一起，實現一個完整的表格應用程式。首先，在React專案的根目錄下執行以下命令，安裝Axios和React Table元件庫：

$ npm install axios react-table

登入後複製

然後，我們需要在src目錄下建立一個名為「App.js」的文件，並寫入以下程式碼：

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;

登入後複製

在這個元件中，我們使用了useState()和useEffect()鉤子來管理元件的狀態。在useEffect()中，我們使用Axios函式庫向我們的API介面發送GET請求，並在回呼函數中將回應資料設定為元件的狀態。最後，我們透過將這些狀態資料傳遞到我們先前建立的表格元件中，將表格渲染到頁面上。