ReactJS - 表格：初学者的指南

你好，有抱負的開發者們！今天，我們將深入ReactJS表格的世界。作為一個教了多年計算機科學的人，我可以告訴你，表格就像是網頁開發中的無名英雄。它們可能不像動畫那樣閃耀，也不像移動設計那樣時尚，但天啊，它們實在是很有用！所以，讓我們挽起袖子開始吧。

ReactJS - Table

理解表格組件

表格組件是什麼？

在ReactJS中，表格組件是一種以行和列顯示數據的方式。把它想成一個你可以嵌入到網頁應用程序中的數字化電子表格。它非常適合以清晰、有組織的方式呈現結構化信息。

React表格的基本結構

讓我們從一個簡單的例子開始：

import React from 'react';

function SimpleTable() {
return (
<table>
<thead>
<tr>
<th>名稱</th>
<th>年齡</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>London</td>
</tr>
</tbody>
</table>
);
}

export default SimpleTable;

在這個例子中：

<table> 是我們表格的主要容器。
<thead> 包含表頭行。
<tbody> 包含數據行。
<tr> 表示一個表行。
<th> 用於表頭單元格。
<td> 用於數據單元格。

應用表格組件

現在我們已經理解了基本知識，讓我們使用React的組件結構和props來創建一個更動態的表格。

import React from 'react';

function DynamicTable({ data }) {
return (
<table>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default DynamicTable;

這個組件更具靈活性：

它接受一個 data prop，這是一個對象數組。
它動態生成表頭，基於第一個數據對象的鍵。
它為數據數組中的每個項目創建行。

要使用這個組件：

import React from 'react';
import DynamicTable from './DynamicTable';

function App() {
const tableData = [
{ name: "John Doe", age: 30, city: "New York" },
{ name: "Jane Smith", age: 25, city: "London" },
{ name: "Bob Johnson", age: 35, city: "Paris" }
];

return (
<div>
<h1>用戶數據</h1>
<DynamicTable data={tableData} />
</div>
);
}

export default App;

添加深色變體和列條紋

為了讓我們的表格在視覺上更具吸引力且更易於閱讀，讓我們添加一個深色變體和列條紋。

import React from 'react';
import './Table.css'; // 我們將創建這個文件來進行樣式設置

function EnhancedTable({ data, darkMode = false }) {
const tableClass = darkMode ? 'table dark' : 'table';

return (
<table className={tableClass}>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index} className={index % 2 === 0 ? 'even' : 'odd'}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default EnhancedTable;

現在，讓我們創建一個CSS文件（Table.css）來設置我們的表格樣式：

.table {
border-collapse: collapse;
width: 100%;
}

.table th, .table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

.table th {
background-color: #f2f2f2;
font-weight: bold;
}

.table .even {
background-color: #f9f9f9;
}

.table.dark {
color: white;
background-color: #333;
}

.table.dark th {
background-color: #444;
}

.table.dark .even {
background-color: #2a2a2a;
}

.table.dark .odd {
background-color: #333;
}

這個CSS提供了：

一個基本的表格樣式，帶有邊框和內距。
為了更好的可讀性，使用交替的行顏色。
表格的深色版本。

要使用這個增強的表格：

import React from 'react';
import EnhancedTable from './EnhancedTable';

function App() {
const tableData = [
{ name: "John Doe", age: 30, city: "New York" },
{ name: "Jane Smith", age: 25, city: "London" },
{ name: "Bob Johnson", age: 35, city: "Paris" }
];

return (
<div>
<h1>用戶數據（亮色模式）</h1>
<EnhancedTable data={tableData} />

<h1>用戶數據（深色模式）</h1>
<EnhancedTable data={tableData} darkMode={true} />
</div>
);
}

export default App;

結論

好了，各位！我們已經從一個基本的靜態表格進步到了一個動態、時尚且靈活的表格組件。記住，表格就像是網頁開發中的瑞士軍刀——它們可能看起來很簡單，但當正確使用時，它們非常多样化和強大。

在你繼續你的React之旅時，請繼續嘗試不同的數據呈現方式。表格只是開始！也許下一次我們會處理排序、過濾，甚至是可編輯的表格。可能性無限！

繼續編程，保持好奇心，並記住：在編程的世界裡，每一個錯誤信息都是一個新的學習機會。開心地編程吧！

方法	描述
`Object.keys()`	返回一個給定對象的屬性名稱數組
`Object.values()`	返回一個給定對象的屬性值數組
`Array.map()`	創建一個新數組，其結果為對數組中的每個元素調用提供的函數
`Array.prototype.indexOf()`	返回給定元素在數組中第一次出現的索引
`String.prototype.toLowerCase()`	返回調用字符串值轉換為小寫
`String.prototype.toUpperCase()`	返回調用字符串值轉換為大寫

Credits: Image by storyset