Question

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

Answer 1

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

要回答您的问题，

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

此外，您可以调用 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" />

打字稿 ANTD 表格渲染

1 个答案:

要回答您的问题，