// 从 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> 列表 | 展示当前列表中的所有数据 |
