// 從 ahooks 引入 useDynamicList 鉤子函數，用于管理動態列表數據（增刪改）
import { useDynamicList } from 'ahooks';// 從 @ant-design/icons 引入兩個圖標組件：減號圓圈圖標和加號圓圈圖標
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';// 定義 App 函數組件
function App() {// 使用 useDynamicList 管理一個字符串數組，默認值為 ['David', 'Jack']// list: 當前列表數據// remove: 刪除指定索引項的方法// insert: 在指定位置插入新項的方法// replace: 替換指定索引項的方法const { list, remove, insert, replace } = useDynamicList(['David', 'Jack']);return (<div>hello App<br />{/* 遍歷 list 渲染輸入框和操作按鈕 */}{list.map((item, index) => {return (<div key={index}>{/* 輸入框綁定當前 item 值，并在變化時調用 replace 更新對應索引的值 */}<inputtype="text"value={item}onChange={(e) => replace(index, e.target.value)}/>{/* 點擊刪除當前項 */}<MinusCircleOutlined onClick={() => remove(index)} />{/* 點擊在當前位置后插入一個空字符串的新項 */}<PlusCircleOutlined onClick={() => insert(index + 1, '')} /></div>);})}<br />{/* 顯示當前 list 的內容，以無序列表形式展示 */}<ul>{list.map((item, index) => (<li key={index}>{item}</li>))}</ul></div>);
}// 導出 App 組件
export default App;
? 功能總結
| 功能 | 描述 |
|---|
useDynamicList | 提供對列表的增、刪、改能力 |
input?輸入框 | 實時更新列表項的內容 |
-?圖標（MinusCircleOutlined） | 刪除當前行數據 |
+?圖標（PlusCircleOutlined） | 在當前行下方插入新空白項 |
<ul>?列表 | 展示當前列表中的所有數據 |
