javascript - 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 being 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"));

Also see this working example on codesandbox.

老实说，我玩过那个库的 api，实际上我不清楚这个库是如何使用的。分页组件应接收项目列表，然后提供 render prop。用这些项目的一部分呈现当前页面。这是一个不分页的分页。基本上它只是一个按钮栏。