React-ultimate-pagination 组件设置

Question

我正在尝试使用这个包react-ultimate-pagination：https://github.com/ultimate-pagination/react-ultimate-pagination

我想像他们的基本演示示例一样设置它：https ://codepen.io/dmytroyarmak/pen/GZwKZJ

github 页面底部的使用说明说要像这样导入组件：

import ReactUltimatePagination from 'react-ultimate-pagination';

但 codepen 演示只显示了一个常量：

const UltimatePagination = reactUltimatePaginationBasic.default;

我从演示中复制了代码，但由于它与导入不匹配，因此出现 UltimatePagination is undefined 和reactUltimatePaginationBasic undefined 的错误。

有谁知道如何像演示示例一样设置这个组件？

Answer 1

该模块将较高阶组件导出createUltimatePagination为命名导出。要使用 es6 导入语法导入它，它必须如下：

import {createUltimatePagination} from 'react-ultimate-pagination';

示例应用程序：

import React, { Component } from "react";
import { render } from "react-dom";

import { createUltimatePagination } from "react-ultimate-pagination";

const Button = ({ value, isActive, disabled, onClick }) => (
  <button
    style={isActive ? { fontWeight: "bold" } : null}
    onClick={onClick}
    disabled={disabled}
  >
    {value}
  </button>
);

const PaginatedPage = createUltimatePagination({
  itemTypeToComponent: {
    PAGE: Button,
    ELLIPSIS: () => <Button value="..." />,
    FIRST_PAGE_LINK: () => <Button value="First" />,
    PREVIOUS_PAGE_LINK: () => <Button value="Prev" />,
    NEXT_PAGE_LINK: () => <Button value="Next" />,
    LAST_PAGE_LINK: () => <Button value="Last" />
  }
});

class App extends Component {
  state = {
    page: 1
  };

  render() {
    return (
      <PaginatedPage
        totalPages={10}
        currentPage={this.state.page}
        onChange={page => this.setState({ page })}
      />
    );
  }
}

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

另请参阅codesandbox 上的此工作示例。

老实说，我尝试过该库的 api，实际上我不清楚该库的用途。分页组件应该接收一个项目列表，然后提供一个render prop以使用这些项目的一部分来渲染当前页面。这是一个不分页的分页。基本上它只是一个按钮栏。