react-ultimate-pagination组件配置疑问：GitHub与CodePen导入方式不一致

我来帮你理清这个导入差异的问题~ 本质上是两种不同模块格式的使用场景导致的，下面分情况给你解决方案：

两种导入方式的差异原因 #

• GitHub文档的ES模块导入：

  import ReactUltimatePagination from 'react-ultimate-pagination';
  

  这是给用npm/yarn安装、搭配Webpack/Vite等构建工具的本地React项目用的标准导入方式，这类项目会优先使用包内的ES模块文件，支持tree-shaking优化。

• CodePen的UMD模块导入：

  const UltimatePagination = reactUltimatePaginationBasic.default;
  

  这是给CDN环境用的写法——CodePen里是直接通过全局脚本引入了组件的UMD版本，此时组件会作为全局变量reactUltimatePaginationBasic暴露在浏览器环境中，而UMD模块的默认导出需要通过.default属性获取。

对应场景的正确用法 #

1. 本地项目（用npm/yarn安装） #

首先确保你已经安装了依赖：

npm install react-ultimate-pagination
# 或者用yarn
yarn add react-ultimate-pagination

然后直接使用GitHub文档的导入方式，后续正常调用组件即可：

import ReactUltimatePagination from 'react-ultimate-pagination';

function YourComponent() {
  return (
    <ReactUltimatePagination
      currentPage={3}
      totalPages={10}
      onChange={(page) => console.log('切换到页面:', page)}
    />
  );
}

2. CDN环境（比如CodePen） #

先确保你引入了正确的CDN脚本：

<script src="https://unpkg.com/react-ultimate-pagination-basic@latest/dist/react-ultimate-pagination-basic.min.js"></script>

然后按照CodePen的方式获取组件，再使用：

const UltimatePagination = reactUltimatePaginationBasic.default;

function YourComponent() {
  return (
    <UltimatePagination
      currentPage={3}
      totalPages={10}
      onChange={(page) => console.log('切换到页面:', page)}
    />
  );
}

简单来说，你只需要根据自己的开发环境选择对应的导入方式就行啦~

内容的提问来源于stack exchange，提问作者user42010