在 React 中動態添加表格列可以通過以下步驟實現:
下面是一個示例代碼:
import React, { useState } from "react";
const Table = () => {
const [columns, setColumns] = useState(["Column 1", "Column 2", "Column 3"]);
const addColumn = () => {
const newColumn = `Column ${columns.length + 1}`;
setColumns([...columns, newColumn]);
};
return (
<div>
<button onClick={addColumn}>Add Column</button>
<table>
<thead>
<tr>
{columns.map((column, index) => (
<th key={index}>{column}</th>
))}
</tr>
</thead>
<tbody>
{/* 表格內容 */}
</tbody>
</table>
</div>
);
};
export default Table;
在這個示例中,點擊 “Add Column” 按鈕會觸發 addColumn
函數,該函數會在 columns
數組的末尾添加一個新的列數據,并更新組件的 state。然后,使用 map
函數遍歷 columns
數組,為每個元素創建一個 <th>
元素,從而動態生成表格的列。
注意,這個示例只演示了動態添加表格的列,對于表格內容的動態生成,可以根據具體需求進行處理。