CDQ Component Library

一个现代化的 React 组件库，包含常用的 UI 组件。支持 React 17、18、19 版本。

安装

npm install cdq-component-library

使用

import { Button, Tab, TabPanel, TabContainer, Table } from 'cdq-component-library'

// Button 组件
<Button variant="primary" size="medium" onClick={() => console.log('clicked')}>
  点击我
</Button>

// Tab 组件
<TabContainer defaultActiveTab="tab1">
  <Tab id="tab1">标签1</Tab>
  <Tab id="tab2">标签2</Tab>
  <TabPanel id="tab1">标签1的内容</TabPanel>
  <TabPanel id="tab2">标签2的内容</TabPanel>
</TabContainer>

// Table 组件
const columns = [
  { key: 'name', title: '姓名', dataIndex: 'name' },
  { key: 'age', title: '年龄', dataIndex: 'age' },
  { key: 'email', title: '邮箱', dataIndex: 'email' }
]

const data = [
  { id: 1, name: '张三', age: 25, email: '[email protected]' },
  { id: 2, name: '李四', age: 30, email: '[email protected]' }
]

<Table columns={columns} dataSource={data} />

React 版本兼容性

本组件库支持以下 React 版本：

• ✅ React 17.x
• ✅ React 18.x
• ✅ React 19.x

版本检测

import { getReactVersion, isReact18Plus, isReact19Plus } from 'cdq-component-library'

const version = getReactVersion() // 17, 18, 或 19
const is18Plus = isReact18Plus() // true/false
const is19Plus = isReact19Plus() // true/false

组件

Button

按钮组件，支持多种样式和状态。

Props

• variant: 'primary' | 'secondary' | 'outline' | 'ghost' - 按钮样式
• size: 'small' | 'medium' | 'large' - 按钮大小
• disabled: boolean - 是否禁用
• loading: boolean - 是否显示加载状态
• onClick: () => void - 点击事件
• className: string - 自定义类名
• type: 'button' | 'submit' | 'reset' - 按钮类型

Tab

标签页组件，包含 Tab、TabPanel 和 TabContainer。

Tab Props

• id: string - 标签唯一标识
• children: ReactNode - 标签内容
• className: string - 自定义类名

TabPanel Props

• id: string - 面板唯一标识
• children: ReactNode - 面板内容
• className: string - 自定义类名

TabContainer Props

• defaultActiveTab: string - 默认激活的标签
• children: ReactNode - 子组件
• className: string - 自定义类名

Table

表格组件，支持自定义列和数据。

Props

• columns: TableColumn[] - 列配置
• dataSource: T[] - 数据源
• className: string - 自定义类名
• loading: boolean - 是否显示加载状态
• emptyText: string - 空数据提示文本
• onRowClick: (record: T, index: number) => void - 行点击事件
• rowKey: string | ((record: T, index: number) => string) - 行键值

TableColumn

• key: string - 列唯一标识
• title: string - 列标题
• dataIndex: keyof T - 数据字段
• render: (value: any, record: T, index: number) => ReactNode - 自定义渲染
• width: string | number - 列宽度
• align: 'left' | 'center' | 'right' - 对齐方式

兼容性工具

组件库提供了兼容性工具来处理不同 React 版本的差异：

import { 
  createRoot,
  useCompatibleState,
  useCompatibleEffect,
  useCompatibleCallback 
} from 'cdq-component-library'

// 兼容的渲染方法
const root = await createRoot(container)
root.render(<App />)

// 兼容的 Hooks
function MyComponent() {
  const [state, setState] = useCompatibleState(initialValue)
  const callback = useCompatibleCallback(() => {}, [])
  useCompatibleEffect(() => {}, [])
}

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 类型检查
npm run type-check

# 代码检查
npm run lint

常见问题

1. React 版本冲突

如果遇到版本冲突，可以强制安装：

npm install cdq-component-library --force

2. 样式不生效

确保引入样式文件：

import 'cdq-component-library/dist/style.css'

3. TypeScript 错误

确保 tsconfig.json 包含正确的配置：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true
  }
}

文档

• 兼容性指南 - 详细的 React 版本兼容性说明
• 测试指南 - 本地测试和调试指南
• 发布指南 - 发布到 npm 的完整指南

License

MIT