javascript - 我可以访问由 Ant Design Table 生成的分页组件的道具或状态吗？

问题描述

我的代码中有一个 Ant 设计表，我向它传递了一个分页道具，如下所示：

<Table
  dataSource={alerts}
  pagination={{
    pageSize: 9,
    position: 'bottomLeft',
    showSizeChanger: false
  }}
  columns={columns}
/>

在我的 React 组件树中，我可以看到一个Pagination组件，它同时具有我想要访问的 aprops和state值current（告诉您/设置您所在的当前页面），因此我可以保存它并传递它。

但是，我不知道如何访问这个值，因为我的PaginationReact 代码中实际上没有组件，该Pagination组件只是由组件中的paginationprop生成的Table。是否有可能以某种方式访问该值？

标签： javascriptreactjsreduxpaginationantd

您无法从表格/分页上方的组件访问分页道具和状态。这与 React 的工作方式背道而驰，因为这里的数据只在一个方向流动。从顶部组件到底部组件。

但是，有一种方法，您需要的分页属性可以通过分页事件处理程序返回。因此，您可以将它们以状态保存在使用 Antd Table 的组件中。

在下面的代码中，我使用了 Table 组件提供的 API。onChange并返回实际的onShowSizeChange分页状态值，然后我将其保存到该状态。我在这里指的是分页组件的文档。

const dataSource = [{
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
];

const columns = [{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

class App extends React.Component {
    state = {
      currentPageSize: 1,
      currentPage: 1,
    }
    onPageChange = (page: number, pageSize ? : number) => {
      this.setState({
        currentPage: page,
        currentPageSize: pageSize
      });
    }

    onPageSizeChange = (page: number, pageSize: number) => {
      this.setState({
        currentPage: page,
        currentPageSize: pageSize
      });
    }
    render() {
      return ( < Table dataSource = {
          dataSource
        }
        pagination = {
          {
            pageSize: this.state.currentPageSize,
            current: this.state.currentPage,
            onChange: this.onPageChange,
            onShowSizeChange: this.onPageSizeChange
          }
        }
        columns = {
          columns
        }
        />);
      }
    }

    render( < App / > , document.getElementById("root"));

javascript - 我可以访问由 Ant Design Table 生成的分页组件的道具或状态吗？

问题描述

解决方案

推荐阅读