导入错误：@coreui/react未导出CSmartTable 如何在React-JS中使用该组件

你遇到的Attempted import error: 'CSmartTable' is not exported from '@coreui/react'报错，核心原因是CoreUI版本迭代后的组件包归属调整，以下是两个问题的明确解答：

一、React项目中实现CSmartTable组件的方法 #

• 第一步：确认当前项目安装的CoreUI版本，只有v4及以上版本需要做额外适配，v3及更早版本直接从@coreui/react导入即可使用
• 第二步：若为v4+版本，先安装独立的表格组件依赖，执行命令：

  npm install @coreui/react-table
  # 或使用yarn
  yarn add @coreui/react-table
  

• 第三步：修改导入语句，将原导入路径替换为新的独立包路径：

  // 替换前（错误写法，仅v3及之前版本支持）
  // import { CSmartTable } from '@coreui/react'
  // 替换后（v4+版本正确写法）
  import { CSmartTable } from '@coreui/react-table'
  

• 第四步：按业务需求传入参数调用组件，基础使用示例如下：

  const DemoTable = () => {
    // 配置表格列
    const tableColumns = [
      { key: 'userId', label: '用户ID' },
      { key: 'userName', label: '用户名' },
      { key: 'department', label: '所属部门' },
    ]
    // 表格数据源
    const tableData = [
      { userId: 1, userName: '张三', department: '研发部' },
      { userId: 2, userName: '李四', department: '产品部' },
    ]
    // 渲染组件，可根据需要添加分页、排序、筛选等配置参数
    return <CSmartTable columns={tableColumns} items={tableData} pagination />
  }
  

二、CSmartTable归属与依赖安装说明 #

• CSmartTable属于CoreUI官方原生组件，并非第三方自定义组件，是否需要额外安装依赖完全取决于你使用的CoreUI版本：
  • CoreUI v3及更早版本：CSmartTable直接内置在@coreui/react主包中，不需要安装额外依赖，直接从主包导入即可正常使用
  • CoreUI v4及更新版本：官方对组件做了模块化拆分，所有表格相关能力都抽离到独立的@coreui/react-table包中，必须单独安装该依赖才能正常导入使用，否则就会出现你遇到的导出失败报错

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