当前位置：首页 > news >正文

Carbon Components React核心组件深度解析：DataTable、Button、Form等50+组件使用教程

news 2026/7/13 16:09:07

Carbon Components React核心组件深度解析：DataTable、Button、Form等50+组件使用教程

【免费下载链接】carbon-components-reactReact components for the Carbon Design System项目地址: https://gitcode.com/gh_mirrors/ca/carbon-components-react

Carbon Components React是基于Carbon Design System构建的React组件库，提供了50多个高质量、可访问且灵活的UI组件，帮助开发者快速构建一致的企业级应用界面。本文将深入解析DataTable、Button、Form等核心组件的使用方法，让你轻松掌握这个强大工具库的精髓。

快速入门：安装与基础配置

要开始使用Carbon Components React，首先需要通过npm或yarn安装相关依赖包。推荐使用yarn进行安装，以利用其离线镜像功能确保依赖安全：

npm i carbon-components carbon-components-react carbon-icons --save # 或使用yarn yarn add carbon-components carbon-components-react carbon-icons

安装完成后，你可以在项目中直接导入所需组件。所有组件都通过carbon-components-react包导出，例如导入DataTable组件：

import { DataTable } from 'carbon-components-react';

项目的安装指南详细信息可参考docs/install.md文件，其中包含了依赖管理的最佳实践和安全考量。

核心组件详解

DataTable：功能强大的表格组件

DataTable是Carbon Components React中最复杂也最强大的组件之一，提供了完整的表格功能支持，包括排序、筛选、行展开、选择和批量操作等。它采用render prop模式，给予开发者极大的灵活性。

基本用法

以下是一个简单的DataTable实现示例：

import { DataTable } from 'carbon-components-react'; const { TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader } = DataTable; function App() { const headers = [ { key: 'name', header: 'Name' }, { key: 'status', header: 'Status' }, { key: 'email', header: 'Email' }, ]; const rows = [ { id: '1', name: 'John Smith', status: 'Active', email: 'john.smith@example.com' }, { id: '2', name: 'Jane Doe', status: 'Inactive', email: 'jane.doe@example.com' }, { id: '3', name: 'Bob Johnson', status: 'Active', email: 'bob.johnson@example.com' }, ]; return ( <DataTable rows={rows} headers={headers} render={({ rows, headers, getHeaderProps }) => ( <TableContainer title="User List"> <Table> <TableHead> <TableRow> {headers.map(header => ( <TableHeader {...getHeaderProps({ header })}> {header.header} </TableHeader> ))} </TableRow> </TableHead> <TableBody> {rows.map(row => ( <TableRow key={row.id}> {row.cells.map(cell => ( <TableCell key={cell.id}>{cell.value}</TableCell> ))} </TableRow> ))} </TableBody> </Table> </TableContainer> )} /> ); }

高级功能

DataTable支持多种高级功能，通过组合不同的子组件实现：

排序：只需将getHeaderProps应用到TableHeader组件
行展开：使用TableExpandHeader、TableExpandRow和TableExpandedRow组件
选择功能：使用TableSelectAll和TableSelectRow组件实现行选择
筛选：结合TableToolbar和TableToolbarSearch组件实现搜索筛选
批量操作：使用TableBatchActions和TableBatchAction组件处理多选行操作

完整的DataTable文档和高级用法示例可在src/components/DataTable/README.md中找到。

Button：多样化的按钮组件

Carbon提供了多种按钮类型，满足不同场景需求：

PrimaryButton：主要操作按钮，突出显示
SecondaryButton：次要操作按钮
DangerButton：危险操作按钮，如删除操作

基本用法示例：

import { Button, PrimaryButton, SecondaryButton, DangerButton } from 'carbon-components-react'; function ButtonExample() { return ( <div> <PrimaryButton>提交</PrimaryButton> <SecondaryButton>取消</SecondaryButton> <DangerButton>删除</DangerButton> <Button kind="ghost">链接按钮</Button> <Button small>小型按钮</Button> </div> ); }

按钮组件支持多种属性，如disabled、loading、href等，可根据需要灵活配置。

Form：完整的表单组件套件

Carbon提供了一套完整的表单组件，包括：

Form：表单容器
FormGroup：表单组容器
FormItem：表单项容器
FormLabel：表单标签
TextInput：文本输入框
TextArea：文本区域
Select：下拉选择框
Checkbox：复选框
RadioButton：单选按钮

表单组件示例：

import { Form, FormGroup, FormItem, FormLabel, TextInput, Select, SelectItem, Checkbox } from 'carbon-components-react'; function ExampleForm() { return ( <Form> <FormGroup legend="个人信息"> <FormItem> <FormLabel htmlFor="name">姓名</FormLabel> <TextInput id="name" placeholder="请输入姓名" /> </FormItem> <FormItem> <FormLabel htmlFor="department">部门</FormLabel> <Select id="department" defaultValue="engineering"> <SelectItem value="engineering">工程</SelectItem> <SelectItem value="marketing">市场</SelectItem> <SelectItem value="sales">销售</SelectItem> </Select> </FormItem> <FormItem> <Checkbox id="agree" labelText="我同意条款和条件" /> </FormItem> </FormGroup> </Form> ); }

所有表单组件都内置了无障碍支持和验证功能，确保表单既易用又符合 accessibility 标准。

其他常用组件

除了上述核心组件外，Carbon Components React还提供了许多其他实用组件：

UI Shell：应用布局组件

UIShell提供了完整的应用布局解决方案，包括：

Header：应用头部
SideNav：侧边导航
Content：内容区域
SkipToContent：无障碍跳转链接

使用示例：

import { UIShell } from 'carbon-components-react'; const { Header, HeaderName, SideNav, SideNavItems, SideNavLink, Content, SkipToContent } = UIShell; function AppLayout() { return ( <div> <SkipToContent /> <Header> <HeaderName prefix="IBM">我的应用</HeaderName> </Header> <SideNav> <SideNavItems> <SideNavLink href="#home">首页</SideNavLink> <SideNavLink href="#profile">个人资料</SideNavLink> <SideNavLink href="#settings">设置</SideNavLink> </SideNavItems> </SideNav> <Content> {/* 应用内容 */} </Content> </div> ); }

完整的UIShell组件文档可参考src/components/UIShell/README.md。

Modal：模态对话框

Modal组件用于创建模态对话框，支持多种变体：

Modal：基础模态框
ComposedModal：可组合模态框
ModalWrapper：带包装器的模态框

使用示例：

import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'carbon-components-react'; import { useState } from 'react'; function ExampleModal() { const [isOpen, setIsOpen] = useState(false); return ( <> <Button onClick={() => setIsOpen(true)}>打开模态框</Button> <Modal open={isOpen} onClose={() => setIsOpen(false)} modalHeading="示例模态框" > <ModalBody> 这是一个Carbon模态框组件的示例内容。 </ModalBody> <ModalFooter> <Button onClick={() => setIsOpen(false)}>取消</Button> <Button onClick={() => setIsOpen(false)} kind="primary">确认</Button> </ModalFooter> </Modal> </> ); }