Question

我试图使用这个包反应 - 最终分页：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未定义且reactUltimatePaginationBasic未定义。

有没有人知道如何像演示示例一样设置此组件？

Answer 1

模块将较高的oder组件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以使用这些项目的片段呈现当前页面。这是一个不分页的分页。基本上它只是一个按钮栏。

Answer 2

在使用var ReactUltimatePagination = require('react-ultimate-pagination');

安装npm install react-ultimate-pagination --save后，请使用{{1}}

react-ultimate-pagination组件设置

2 个答案: