獲取一定數量的信息到 antd 表

Question

我是新的 react hooks 開發人員，我對類不太了解，因為每個人都建議，所以從 hooks 開始，這里我有 antd 表（從他們的頁面中獲取，所有內容都是使用 react 類編碼的，我以某種方式將其轉換為 hooks），here我想給用戶選擇他/她想要在一個頁面中有多少信息的可能性。 當用戶點擊它時，它應該從下拉列表中給出下拉列表（10 / 頁，20 / 頁，50 / 頁，100 / 頁）用戶可以選擇他想要顯示的數量......所以我想要那個功能在圖片里

如何通過反應鈎子擁有這樣的功能？

這是我的代碼：

 import React from "react"; import { EventTable } from "./EventTable"; const eventsData = [ { key: "1", title: "John Brown", age: 32, address: "New York No. 1 Lake Park", }, { key: "2", title: "Joe Black", age: 42, address: "London No. 1 Lake Park", }, { key: "3", title: "Jim Green", age: 32, address: "Sidney No. 1 Lake Park", }, { key: "4", title: "Jim Red", age: 32, address: "London No. 2 Lake Park", }, { key: "5", title: "Jim Red", age: 32, address: "London No. 2 Lake Park", }, ]; function App() { return ( <div className="App"> <EventTable eventsData={eventsData} /> </div> ); } export default App;

 import React, { useState, useEffect } from "react"; import { Table } from "antd"; import "antd/dist/antd.css"; const EventTable = ({ eventsData }) => { const allColumns = [ { title: "ID", dataIndex: "key", key: "id", }, { title: "Title", dataIndex: "title", key: "title", }, { title: "Address", dataIndex: "address", key: "address", }, { title: "Age", dataIndex: "age", key: "age", }, ]; const [tableColumns, setTableColumns] = useState(allColumns); return ( <Table dataSource={eventsData} columns={tableColumns} pagination={true} /> ); }; export { EventTable };

Answer 1

您可以閱讀示例中使用的代碼，每個組件變體下都有一個代碼選項卡，還有一個沙箱鏈接，它們真的很有幫助。

我可以看到您正在向分頁標志發送 boolean 。 像他們一樣發送object怎么樣？

const pagination = { 
    defaultPageSize: 3,
    current: 1,
    pageSizeOptions: ['3', '6', '9']
}

然后將其發送到Table 。

<Table dataSource={eventsData} columns={tableColumns} pagination={pagination} />

另一個細節，你是一個React 開發者，鈎子允許我們使用Class組件特性，在函數式組件內部，我們也可以編寫我們自己的自定義鈎子，但它們只是一個特性，你不是一個“React Hook 開發者” 。

反應鈎子