Typescript ANTD 表格渲染答案

【问题标题】：Typescript ANTD table renderTypescript ANTD 表格渲染
【发布时间】：2021-09-23 19:33:33
【问题描述】：

我是 typescript 和 ant design 的新手，我想使用 ant design 创建一个表格，并希望有一列“删除”来手动删除表格中的每一行。使用普通的 React 和 JS，我可以在我的列对象中呈现删除链接，但使用打字稿，我不能。我必须在我的 Column 类型中定义渲染函数吗？这是如何运作的？有人能帮忙吗？示例代码如下：

type Column = {
   title: string;
   dataIndex: string;
   key: string;
};

const column: Column[] = [
   {
      title: 'Name',
      dataIndex: 'name',
      key: 'name'
   },
   {
      title: 'Action',
      dataIndex: '',
      key: 'x',
      render (() => <a>Delete<a>)
   }
]


return (
   <Table column={column} dataSource={data} />
)

【问题讨论】：

标签： reactjs typescript antd

【解决方案1】：

你可以查看官方Antd documentation的例子。

回答您的问题，

更新删除按钮的onClick监听器中的dataSource，并移除它被按下的项目。

此外，您可以调用 API 来处理删除行为并将更新的数据设置为 dataSourceprop

提供了一个最低限度的工作代码示例。

const { useEffect, useState, useCallback, useMemo } = React
const { Table } = antd

const initialData = Array(15)
    .fill()
    .map((v, i) => `Item ${i}`)
    .map((name) => ({id: name, name}));

function App(props){
  const [data, setData] = useState([]);
  const resetData = useCallback(() => setData(initialData))
  const deleteHandler = useCallback((id) => {
    setData(prevState =>
      prevState.filter(row => row.id !== id))
  }, []);
  const column = useMemo(() => [
     {
        title: 'Name',
        dataIndex: 'name',
        key: 'name'
     },
     {
        title: 'Action',
        key: 'x',
        render: ((_, row) => <button onClick={() => deleteHandler(row.id)}>Delete</button>)
     }
  ], [])
  useEffect(() => {
    // fetch data from network.
    setData(initialData);
  }, [])
  return (
    <div>
     <button onClick={resetData}>Reset</button>
     <Table columns={column} dataSource={data} />
    </div>
   )
}

ReactDOM.render(<App />,
   document.querySelector('#root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.7/antd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.7/antd.compact.min.css"/>
<div id="root" />

【讨论】：