AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

前端组件库 ——Arco Design React 知识点大全（二）

2026-05-09 15
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 教程来源 https://www.vrhyh.cn/ Arco Design提供完整UI组件体系：基础按钮（多类型/状态/尺寸）、智能Input（含校验与装饰）、Modal/Message/Notification等反馈组件、高性能Table、24列响应式Grid，以及与React Hooks深度集成的表单系统，助力高效构建企业级应用。

三、核心组件体系

3.1 基础组件
3.1.1 Button 按钮组件
按钮是用户交互中最基础的组件，Arco Design 提供了丰富的按钮样式和状态。

import { Button, Space } from '@arco-design/web-react';

const ButtonDemo = () => (
  <Space direction="vertical" size="large">
    {/* 按钮类型 */}
    <Space>
      <Button type="primary">主要按钮</Button>
      <Button type="default">默认按钮</Button>
      <Button type="secondary">次要按钮</Button>
      <Button type="dashed">虚线按钮</Button>
      <Button type="text">文本按钮</Button>
      <Button type="outline">线框按钮</Button>
    </Space>

    {/* 按钮状态 */}
    <Space>
      <Button type="primary" status="danger">危险按钮</Button>
      <Button type="primary" status="warning">警告按钮</Button>
      <Button type="primary" status="success">成功按钮</Button>
      <Button disabled>禁用按钮</Button>
      <Button loading>加载中</Button>
    </Space>

    {/* 按钮尺寸 */}
    <Space>
      <Button size="mini">迷你按钮</Button>
      <Button size="small">小型按钮</Button>
      <Button>默认按钮</Button>
      <Button size="large">大型按钮</Button>
    </Space>

    {/* 长按钮（宽度100%） */}
    <Button long type="primary">长按钮</Button>

    {/* 圆形按钮（用于图标） */}
    <Button shape="circle" type="primary">
      <IconSearch />
    </Button>

    {/* 按钮组 */}
    <Button.Group>
      <Button type="primary">上一步</Button>
      <Button type="primary">下一步</Button>
    </Button.Group>
  </Space>
);

按钮类型说明：Arco Design 提供了多种按钮类型。其中 primary 用于主要操作，secondary 用于次要操作，dashed 用于虚线边框的辅助操作，text 用于轻量化操作，outline 用于线框风格的辅助操作。status 属性用于表示操作结果状态（成功/警告/危险）。

3.2 数据录入组件
3.2.1 Input 输入框组件
Input 组件是所有表单组件的基础，Arco Design 的 Input 组件功能非常丰富。Arco 组件库在设计 Input 组件时，从四个方面规划了 API：功能、构成、状态和样式。

Input 组件的 API 分类：
image.png
image.png
基本用法：

import { Input, Space } from '@arco-design/web-react';

const InputDemo = () => {
  const [value, setValue] = useState('');

  return (
    <Space direction="vertical" size="medium">
      {/* 基础输入框 */}
      <Input placeholder="请输入内容" />

      {/* 带清除按钮 */}
      <Input placeholder="可清除的内容" allowClear />

      {/* 受控输入框 */}
      <Input 
        value={value} 
        onChange={setValue}
        placeholder="受控输入框" 
      />

      {/* 密码输入框 */}
      <Input.Password placeholder="请输入密码" />

      {/* 文本域 */}
      <Input.TextArea rows={4} placeholder="请输入详细描述" />

      {/* 带前缀/后缀 */}
      <Input prefix="https://" placeholder="请输入网址" />
      <Input suffix=".com" placeholder="请输入域名" />
      <Input addBefore="http://" addAfter=":8080" placeholder="请输入地址" />

      {/* 字数统计 */}
      <Input maxLength={20} showWordLimit placeholder="最多20个字符" />

      {/* 错误/警告状态 */}
      <Input status="error" defaultValue="错误内容" />
      <Input status="warning" defaultValue="警告内容" />
    </Space>
  );
};

3.3 反馈组件
3.3.1 Modal 模态框

import { Modal, Button } from '@arco-design/web-react';
import { useState } from 'react';

const ModalDemo = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)} type="primary">
        打开模态框
      </Button>

      <Modal
        title="模态框标题"
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        okText="确认"
        cancelText="取消"
      >
        <p>这是模态框的内容</p>
        <p>可以放置任意自定义内容</p>
      </Modal>
    </>
  );
};

3.3.2 Message 全局提示

import { Message, Button } from '@arco-design/web-react';

const MessageDemo = () => {
  return (
    <Space>
      <Button onClick={() => Message.info('这是一条信息')}>信息</Button>
      <Button onClick={() => Message.success('操作成功')}>成功</Button>
      <Button onClick={() => Message.warning('警告信息')}>警告</Button>
      <Button onClick={() => Message.error('操作失败')}>错误</Button>
      <Button onClick={() => Message.loading('加载中...')}>加载中</Button>
    </Space>
  );
};

3.3.3 Notification 通知

import { Notification, Button } from '@arco-design/web-react';

const NotificationDemo = () => {
  return (
    <Button
      onClick={() =>
        Notification.success({
          title: '操作成功',
          content: '您的数据已保存',
          duration: 3000,
          position: 'topRight',
        })
      }
    >
      显示通知
    </Button>
  );
};

Notification 位置选项：topLeft、topRight、bottomLeft、bottomRight。

3.4 数据展示组件
3.4.1 Table 表格组件

import { Table, Tag, Button, Space } from '@arco-design/web-react';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
  },
  {
    title: '年龄',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: '状态',
    dataIndex: 'status',
    render: (status) => (
      <Tag color={status === 'active' ? 'green' : 'red'}>
        {status === 'active' ? '启用' : '禁用'}
      </Tag>
    ),
  },
  {
    title: '操作',
    dataIndex: 'operations',
    render: () => (
      <Space>
        <Button type="text" size="small">编辑</Button>
        <Button type="text" status="danger" size="small">删除</Button>
      </Space>
    ),
  },
];

const data = [
  { key: '1', name: '张三', age: 25, status: 'active' },
  { key: '2', name: '李四', age: 30, status: 'inactive' },
  { key: '3', name: '王五', age: 28, status: 'active' },
];

const TableDemo = () => (
  <Table 
    columns={columns} 
    data={data} 
    border 
    stripe 
    pagination={
  { pageSize: 10 }}
    rowKey="key"
  />
);

3.5 布局组件
3.5.1 Grid 栅格系统
Arco Design 采用 24 列栅格系统，通过 Row 和 Col 组件实现响应式布局：

import { Row, Col } from '@arco-design/web-react';

const GridDemo = () => (
  <>
    {/* 基础栅格 */}
    <Row gutter={16}>
      <Col span={12}>
        <div className="demo-col">占12列</div>
      </Col>
      <Col span={12}>
        <div className="demo-col">占12列</div>
      </Col>
    </Row>

    {/* 响应式栅格 */}
    <Row gutter={[16, 24]}>
      <Col xs={24} sm={12} md={8} lg={6}>
        响应式内容
      </Col>
      <Col xs={24} sm={12} md={8} lg={6}>
        响应式内容
      </Col>
      <Col xs={24} sm={12} md={8} lg={6}>
        响应式内容
      </Col>
    </Row>

    {/* 列偏移 */}
    <Row>
      <Col span={6} offset={6}>
        偏移6列的内容
      </Col>
    </Row>
  </>
);

3.6 表单组件
Arco Design 的表单组件与 React Hooks 深度集成，提供了强大的表单管理能力：

import { Form, Input, Select, Button, Message } from '@arco-design/web-react';

const FormItem = Form.Item;

const FormDemo = () => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    try {
      const values = await form.validate();
      Message.success('提交成功：' + JSON.stringify(values));
    } catch (error) {
      Message.error('请正确填写表单');
    }
  };

  return (
    <Form form={form} autoComplete="off">
      <FormItem 
        label="用户名" 
        field="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input placeholder="请输入用户名" />
      </FormItem>

      <FormItem 
        label="邮箱" 
        field="email"
        rules={[
          { required: true, message: '请输入邮箱' },
          { type: 'email', message: '请输入正确的邮箱格式' }
        ]}
      >
        <Input placeholder="请输入邮箱" />
      </FormItem>

      <FormItem 
        label="角色" 
        field="role"
        rules={[{ required: true, message: '请选择角色' }]}
      >
        <Select placeholder="请选择角色">
          <Select.Option value="admin">管理员</Select.Option>
          <Select.Option value="user">普通用户</Select.Option>
        </Select>
      </FormItem>

      <FormItem wrapperCol={
  { offset: 5 }}>
        <Button type="primary" onClick={handleSubmit}>提交</Button>
        <Button onClick={() => form.resetFields()} style={
  { marginLeft: 12 }}>
          重置
        </Button>
      </FormItem>
    </Form>
  );
};

表单受控/非受控原理：Arco Design 的表单组件通过 Form.Item 的 field 属性自动管理表单项的值。在 Form.Item 内部，会通过 cloneElement 给子组件注入 value 和 onChange 属性，实现表单数据的统一收集和管理。当表单被提交时，onSubmit 回调会接收到经过验证的完整表单数据。

Form.Item 接收的通用属性说明：
image.png
来源：
https://vrhyh.cn/

文章标签：
前端开发
API
游客xp6ru7c63sdiu
目录
相关文章
LucianaiB
|
10天前
|
人工智能 JSON 供应链
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
LucianaiB分享零成本畅用JVS Claw教程（学生认证享7个月使用权），并开源GeoMind项目——将JVS改造为科研与产业地理情报可视化AI助手，支持飞书文档解析、地理编码与腾讯地图可视化，助力产业关系图谱构建。
LucianaiB
23441 10
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
JEECG
|
14天前
|
人工智能 缓存 BI
Claude Code + DeepSeek V4-Pro 真实评测：除了贵，没别的毛病
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro，跑完 Skills —— OA 审批、大屏、报表、部署 5 大实战场景后的真实体验 ![](https://oscimg.oschina.net/oscnet/up608d34aeb6bafc47f
JEECG
4727 15
Claude Code + DeepSeek V4-Pro 真实评测：除了贵，没别的毛病
JEECG
|
15天前
|
人工智能 JSON BI
DeepSeek V4 来了！超越 Claude Sonnet 4.5，赶紧对接 Claude Code 体验一把
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro 的真实体验与避坑记录 本文记录我将 Claude Code 对接 DeepSeek 最新模型（V4Pro）后的真实体验，测试了 Skills 自动化查询和积木报表 AI 建表两个场景——有惊喜，也踩
JEECG
5675 13
兮动人
|
1月前
|
人工智能 自然语言处理 安全
Claude Code 全攻略：命令大全 + 实战工作流（建议收藏）
本文介绍了Claude Code终端AI助手的使用指南，主要内容包括：1)常用命令如版本查看、项目启动和更新；2)三种工作模式切换及界面说明；3)核心功能指令速查表，包含初始化、压缩对话、清除历史等操作；4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例，帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发，特别强调了CLAUDE.md文件作为项目知识库的核心作用。
兮动人
24800 65
Claude Code 全攻略：命令大全 + 实战工作流（建议收藏）
andyfengbupt
|
3天前
|
前端开发 API 内存技术
对比claude code等编程cli工具与deepseek v4的适配情况
DeepSeek V4发布后，多家编程工具因未适配其强制要求的`reasoning_content`字段而报错。本文对比Claude Code、GitHub Copilot、Langcli、OpenCode及DeepSeek-TUI等主流工具的兼容性：Claude Code需按官方方式配置；Langcli表现最佳，开箱即用且无报错；Copilot与OpenCode暂未修复问题；DeepSeek-TUI尚处早期阶段。
andyfengbupt
745 2
对比claude code等编程cli工具与deepseek v4的适配情况