Typescript ANTD表格渲染

Question

我刚接触typescript和ant设计，我想使用ant设计创建一个表，并希望有一个" delete“列来手动删除表中的每一行。使用普通的React和JS，我可以在我的列对象中呈现删除链接，但是使用typescript，我不能。我必须在我的列类型中定义呈现函数吗？这是怎么回事？有人能帮上忙吗？示例代码如下：

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} />
)

Answer 1

你可以查看官方Antd documentation获取示例。

为了回答你的问题，

更新delete按钮的onClick listener中的dataSource，并移除按下它的项。

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

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

​

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" />

​