React Spectrum 实战指南基于 Adobe 设计系统的 React 组件库入门与主题化【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrumReact Spectrum 是 Adobe 官方设计系统 Spectrum 的 React 实现本文将以 packages/adobe/react-spectrum/README.md 为主线结合仓库源码带你完成从安装、工程配置到第一个应用的全流程并深入解析Provider主题机制、无障碍与国际化能力的底层实现。一、React Spectrum 是什么Spectrum 是 Adobe 的设计系统定义了 Adobe 产品线Photoshop、Illustrator 等统一的视觉语言、交互模式与设计令牌。React Spectrumnpm 包名adobe/react-spectrum则是这一设计系统在 React 生态中的完整落地提供了一套开箱即用的企业级 UI 组件。它在 Adobe React Spectrum 仓库中处于应用层的位置。围绕它的还有两个底层库共同组成一套完整的分层架构库定位在本仓库中的位置React Spectrum面向业务开发的完整组件库含 Spectrum 视觉样式packages/adobe/react-spectrumReact Aria无样式headless的无障碍行为与交互逻辑层packages/react-ariaReact Stately与 UI 无关的状态管理层packages/react-stately这种分层设计意味着如果你希望从零构建自己的组件库可以只使用 React Aria 和 React Stately 获取无障碍行为与状态管理而如果希望直接获得与 Adobe 产品一致的视觉体验则直接使用 React Spectrum。这一点在 README 的 Learn more 部分 有明确说明。二、四大核心特性README 用四个关键词概括了 React Spectrum 的设计目标下面结合源码逐一展开。1. 无障碍Accessible组件在设计之初就将无障碍放在首位内置完整的屏幕阅读器支持与键盘导航。这不是事后打补丁而是贯穿在每一层的架构决策交互行为层React Aria为每个组件产出完整的 ARIA 属性例如 Button 源码 通过useButton钩子获取buttonProps其中包含aria-label、aria-labelledby、id等无障碍属性键盘交互由底层钩子统一管理例如按钮的 Enter/Space 触发、焦点管理、FocusRing视觉焦点指示等都在 Button.tsx 中通过useButton、useHover、useFocus组合实现无障碍标注如 pending 状态下的 loading 文案通过国际化消息自动生成见 intl/button 目录。2. 自适应Adaptive组件同时支持鼠标、触摸和键盘三种交互方式并按响应式设计原则构建。源码中有两个层面的体现Pointer 感知Provider内部通过 useScale 依据设备指针类型自动选择medium中或large大两种缩放档位——触屏设备上控件更大更易点按响应式断点Provider内置默认断点{S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536}见 Provider.tsx 第 35 行用于Flex、Grid等布局组件的styleProps响应式样式。3. 国际化International支持超过 30 种语言包括从右到左RTL语言、日期与数字格式化等。实现上依托两个机制I18nProviderProvider内部包裹了I18nProvider见 Provider.tsx通过locale属性设置语言环境并自动推导dir文字方向——例如传入阿拉伯语 locale 时Provider 渲染的 DOM 节点会自动设置dirrtl见 ProviderWrapper 的渲染部分组件内部文案每个组件自带翻译字符串通过useLocalizedStringFormatter按 locale 加载。例如 Button.tsx 第 100 行 加载react-spectrum/button的消息包仓库中 intl/button 目录 下就是按语言存放的翻译 JSON此外包内还提供useDateFormatter、useNumberFormatter、useCollator等国际化工具钩子见 exports 目录。4. 可定制主题Customizable theming主题是一个包含多份 CSS 模块的对象支持品牌化定制与暗色模式自动适配。其类型定义在 src/provider/types.tsexport interface Theme { /** CSS module defining the global variables, which do not change between color schemes/scales. */ global?: CSSModule; /** CSS module defining the variables for the light color scheme. */ light?: CSSModule; /** CSS module defining the variables for the dark color scheme. */ dark?: CSSModule; /** CSS module defining the variables for the medium scale. */ medium?: CSSModule; /** CSS module defining the variables for the large scale. */ large?: CSSModule; }主题由「颜色方案 × 缩放档位」两个维度组合而成颜色方案为light | dark缩放档位为medium | large。Provider会根据操作系统的外观偏好自动切换明暗模式默认defaultColorScheme为light见 ProviderProps 的类型注释。三、快速开始安装与工程配置README 推荐从官方的 getting started 指南开始它覆盖了「从 npm 安装组件 → 配置构建工具 → 创建第一个应用」三步。以当前仓库为参照安装命令如下npm install adobe/react-spectrum # 或 yarn add adobe/react-spectrum需要注意的工程前提依据 package.jsonReact 版本peerDependencies 要求react与react-dom支持^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1即 React 16.8含 Hooks 的版本均可使用样式处理组件样式来自 CSS Modules需要构建工具支持 CSS Modules 导入。仓库自身使用 Parcel 构建同时提供了多个示例工程佐证各构建工具下的用法例如 examples/next-app、examples/rsp-webpack-4、examples/rac-spectrum-tailwind客户端组件包的入口文件 exports/index.ts 顶部有import client-only;这意味着在 Next.js 等框架的 React Server ComponentRSC中直接导入会触发构建期报错需在客户端组件use client中引入服务端渲染仓库提供了SSRProvider用于服务端渲染场景也通过 exports/index.ts 导出并在根目录维护了专门的 jest.ssr.config.js 测试配置来验证 SSR 兼容性。四、第一个应用Provider 与 ButtonREADME 给出了一个极简示例它是所有 React Spectrum 应用的起点import {Provider, defaultTheme, Button} from adobe/react-spectrum; // Render it in your app! function App() { return ( Provider theme{theme} Button variantcta onPress{() alert(Hey there!)} Hello React Spectrum! /Button /Provider ); }逐行拆解这个示例背后的机制Provider是应用的容器源码注释将其定义为 the container for all React Spectrum applications负责定义主题、语言环境及其他应用级设置见 Provider.tsx。注意示例代码中theme{theme}应实际传入theme{defaultTheme}README 示例中的变量名在实战中应替换为具体主题对象。defaultTheme是默认主题它的实现位于 src/theme-default/defaultTheme.ts由五份 CSS 变量文件组合而成export let defaultTheme: Theme { global, // spectrum-global.css 全局变量不随方案/缩放变化 light, // spectrum-light.css 浅色方案 dark: darkest, // spectrum-darkest.css 深色方案 medium, // spectrum-medium.css 中等缩放 large // spectrum-large.css 大号缩放 };仓库还额外提供lightThemesrc/theme-light/lightTheme.ts与darkTheme三者均从包入口导出。Button的交互示例使用了onPress而非onClick。这是 React Spectrum及其底层 React Aria的设计特色——onPress同时支持鼠标、键盘Enter/Space与触摸保证三种输入方式行为一致。variantcta属于旧版视觉变体cta | overBackground在 Button.tsx 中标记为deprecated新版推荐使用accent、primary、secondary、negative。五、Provider 深度解析主题、颜色方案与语言环境Provider是理解 React Spectrum 的关键。从 src/provider/types.ts 可以看到它支持的完整属性属性类型默认行为说明themeTheme无必填应用的视觉主题未提供时抛出theme not found错误colorSchemelight \| dark跟随操作系统偏好显式指定颜色方案defaultColorSchemelight \| darklight操作系统无偏好设置时的回退值scalemedium \| large依据设备指针类型控件尺寸档位触屏设备自动放大localestringBCP 47浏览器/OS 语言语言环境影响文案与日期数字格式化breakpointsBreakpoints{S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536}styleProps 响应式断点routerRouter无接入客户端路由使链接组件启用 SPA 导航isQuiet/isEmphasized/isDisabled/isRequired/isReadOnly/validationState布尔值 /ValidationState无向所有后代组件注入的公共状态主题强制与嵌套 ProviderProvider实现Provider.tsx要求theme必须存在否则直接抛错if (!theme) { throw new Error(theme not found, the parent provider must have a theme provided); }同时Provider支持嵌套内层Provider未显式指定的属性会从外层继承显式设置的属性则覆盖外层这正是颜色方案优先级显式 props 父 Provider 自动检测规则的实现见 Provider.tsx 第 58-75 行。利用这一点可以在应用的某个局部区域如设置面板临时切换主题或语言环境。应用级公共属性注入useProviderPropsProvider.tsx 第 223 行会把 Provider 上的isQuiet、isDisabled、isRequired等状态注入给所有后代组件。例如在表单场景中用一个Provider isRequired包裹整个表单即可让所有字段统一呈现必填样式无需逐个设置。六、主题定制与暗色模式自定义主题的本质是提供自己的 CSS 变量集合。标准做法是复制defaultTheme的结构global/light/dark/medium/large 五份 CSS替换其中的颜色变量来匹配品牌色然后传入Providerimport {Provider, Button} from adobe/react-spectrum; import myTheme from ./myTheme.css; function App() { return ( Provider theme{myTheme} Button variantprimary品牌化按钮/Button /Provider ); }暗色模式无需额外编码——只要主题对象包含dark变量集Provider就会自动跟随操作系统的深色外观偏好useColorScheme的实现见 Provider.tsx。另外ProviderWrapper 还会把当前颜色方案写入 DOM 的color-scheme样式见 Provider.tsx 第 169-179 行确保滚动条等浏览器原生 UI 也呈现正确的明暗配色。七、组件全家桶速览包的主入口 exports/index.ts 集中导出了全部组件与类型从源码可见覆盖的领域非常完整表单输入TextField、TextArea、NumberField、SearchField、Slider、RangeSlider、Checkbox、CheckboxGroup、Radio、RadioGroup、Switch日期与时间DateField、DatePicker、DateRangePicker、TimeField、Calendar、RangeCalendar选择类Picker、ComboBox、ListBox、ListView、Menu、ActionMenu、ActionGroup导航与内容Tabs、Breadcrumbs、Link、Accordion、Disclosure、Divider、Image、Avatar、Well状态反馈ProgressBar、ProgressCircle、Meter、StatusLight、InlineAlert、IllustratedMessage、Badge、Toast数据展示TableView含Column/Row/Cell、TreeView、TagGroup、LabeledValue布局与容器Flex、Grid含repeat/minmax/fitContent、View、Content、Header、Footer、Form、ButtonGroup弹层与浮层Dialog、AlertDialog、DialogTrigger、DialogContainer、Tooltip、MenuTrigger、ContextualHelp颜色控件ColorArea、ColorSlider、ColorWheel、ColorField、ColorSwatch、ColorPicker工具函数useAsyncList、useListData、useTreeData、useDragAndDrop、useCollator、useDateFormatter、useNumberFormatter等此外每个组件对应的实现位于 src 目录测试用例位于 test 目录需要深入某组件行为时可以直接在对应子目录如 src/button、src/table中阅读源码与测试。八、更进一步与 React Aria、React Stately 的分层使用README 的结尾明确指出React Spectrum 是「帮助你构建自适应、无障碍、健壮用户体验的库家族」中的一员。如果你不想要 Spectrum 的视觉样式而是希望基于自己的设计体系从零构建组件库可以使用React Ariapackages/react-aria获取无样式的无障碍行为钩子键盘导航、ARIA 属性、焦点管理等使用React Statelypackages/react-stately获取与 UI 无关的状态管理钩子列表、选择、日期、表单等状态逻辑将两者组合套上自己的样式即得到自研组件库的完整内核。这种行为层 状态层 样式层的三层解耦正是本仓库最具参考价值的架构设计。想要上手实践可以直接参考仓库中的示例工程如 examples/next-app 的 Next.js 集成、examples/rsp-next-ts 的 TypeScript 配置或阅读 packages/react-aria-componentsReact Aria 的无样式组件版了解 headless 组件的形态。小结React Spectrum 以四大特性无障碍、自适应、国际化、可定制主题为核心设计原则通过Provider单点配置主题、颜色方案、缩放与语言环境让开发者能够以极低的成本构建出与 Adobe 产品一致的、跨设备、跨语言的健壮界面。从本文的示例起步配合 exports 导出清单 与 src 目录 中的源码即可逐步掌握这套组件库的完整能力。【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React Spectrum 实战指南：基于 Adobe 设计系统的 React 组件库入门与主题化
React Spectrum 实战指南基于 Adobe 设计系统的 React 组件库入门与主题化【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrumReact Spectrum 是 Adobe 官方设计系统 Spectrum 的 React 实现本文将以 packages/adobe/react-spectrum/README.md 为主线结合仓库源码带你完成从安装、工程配置到第一个应用的全流程并深入解析Provider主题机制、无障碍与国际化能力的底层实现。一、React Spectrum 是什么Spectrum 是 Adobe 的设计系统定义了 Adobe 产品线Photoshop、Illustrator 等统一的视觉语言、交互模式与设计令牌。React Spectrumnpm 包名adobe/react-spectrum则是这一设计系统在 React 生态中的完整落地提供了一套开箱即用的企业级 UI 组件。它在 Adobe React Spectrum 仓库中处于应用层的位置。围绕它的还有两个底层库共同组成一套完整的分层架构库定位在本仓库中的位置React Spectrum面向业务开发的完整组件库含 Spectrum 视觉样式packages/adobe/react-spectrumReact Aria无样式headless的无障碍行为与交互逻辑层packages/react-ariaReact Stately与 UI 无关的状态管理层packages/react-stately这种分层设计意味着如果你希望从零构建自己的组件库可以只使用 React Aria 和 React Stately 获取无障碍行为与状态管理而如果希望直接获得与 Adobe 产品一致的视觉体验则直接使用 React Spectrum。这一点在 README 的 Learn more 部分 有明确说明。二、四大核心特性README 用四个关键词概括了 React Spectrum 的设计目标下面结合源码逐一展开。1. 无障碍Accessible组件在设计之初就将无障碍放在首位内置完整的屏幕阅读器支持与键盘导航。这不是事后打补丁而是贯穿在每一层的架构决策交互行为层React Aria为每个组件产出完整的 ARIA 属性例如 Button 源码 通过useButton钩子获取buttonProps其中包含aria-label、aria-labelledby、id等无障碍属性键盘交互由底层钩子统一管理例如按钮的 Enter/Space 触发、焦点管理、FocusRing视觉焦点指示等都在 Button.tsx 中通过useButton、useHover、useFocus组合实现无障碍标注如 pending 状态下的 loading 文案通过国际化消息自动生成见 intl/button 目录。2. 自适应Adaptive组件同时支持鼠标、触摸和键盘三种交互方式并按响应式设计原则构建。源码中有两个层面的体现Pointer 感知Provider内部通过 useScale 依据设备指针类型自动选择medium中或large大两种缩放档位——触屏设备上控件更大更易点按响应式断点Provider内置默认断点{S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536}见 Provider.tsx 第 35 行用于Flex、Grid等布局组件的styleProps响应式样式。3. 国际化International支持超过 30 种语言包括从右到左RTL语言、日期与数字格式化等。实现上依托两个机制I18nProviderProvider内部包裹了I18nProvider见 Provider.tsx通过locale属性设置语言环境并自动推导dir文字方向——例如传入阿拉伯语 locale 时Provider 渲染的 DOM 节点会自动设置dirrtl见 ProviderWrapper 的渲染部分组件内部文案每个组件自带翻译字符串通过useLocalizedStringFormatter按 locale 加载。例如 Button.tsx 第 100 行 加载react-spectrum/button的消息包仓库中 intl/button 目录 下就是按语言存放的翻译 JSON此外包内还提供useDateFormatter、useNumberFormatter、useCollator等国际化工具钩子见 exports 目录。4. 可定制主题Customizable theming主题是一个包含多份 CSS 模块的对象支持品牌化定制与暗色模式自动适配。其类型定义在 src/provider/types.tsexport interface Theme { /** CSS module defining the global variables, which do not change between color schemes/scales. */ global?: CSSModule; /** CSS module defining the variables for the light color scheme. */ light?: CSSModule; /** CSS module defining the variables for the dark color scheme. */ dark?: CSSModule; /** CSS module defining the variables for the medium scale. */ medium?: CSSModule; /** CSS module defining the variables for the large scale. */ large?: CSSModule; }主题由「颜色方案 × 缩放档位」两个维度组合而成颜色方案为light | dark缩放档位为medium | large。Provider会根据操作系统的外观偏好自动切换明暗模式默认defaultColorScheme为light见 ProviderProps 的类型注释。三、快速开始安装与工程配置README 推荐从官方的 getting started 指南开始它覆盖了「从 npm 安装组件 → 配置构建工具 → 创建第一个应用」三步。以当前仓库为参照安装命令如下npm install adobe/react-spectrum # 或 yarn add adobe/react-spectrum需要注意的工程前提依据 package.jsonReact 版本peerDependencies 要求react与react-dom支持^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1即 React 16.8含 Hooks 的版本均可使用样式处理组件样式来自 CSS Modules需要构建工具支持 CSS Modules 导入。仓库自身使用 Parcel 构建同时提供了多个示例工程佐证各构建工具下的用法例如 examples/next-app、examples/rsp-webpack-4、examples/rac-spectrum-tailwind客户端组件包的入口文件 exports/index.ts 顶部有import client-only;这意味着在 Next.js 等框架的 React Server ComponentRSC中直接导入会触发构建期报错需在客户端组件use client中引入服务端渲染仓库提供了SSRProvider用于服务端渲染场景也通过 exports/index.ts 导出并在根目录维护了专门的 jest.ssr.config.js 测试配置来验证 SSR 兼容性。四、第一个应用Provider 与 ButtonREADME 给出了一个极简示例它是所有 React Spectrum 应用的起点import {Provider, defaultTheme, Button} from adobe/react-spectrum; // Render it in your app! function App() { return ( Provider theme{theme} Button variantcta onPress{() alert(Hey there!)} Hello React Spectrum! /Button /Provider ); }逐行拆解这个示例背后的机制Provider是应用的容器源码注释将其定义为 the container for all React Spectrum applications负责定义主题、语言环境及其他应用级设置见 Provider.tsx。注意示例代码中theme{theme}应实际传入theme{defaultTheme}README 示例中的变量名在实战中应替换为具体主题对象。defaultTheme是默认主题它的实现位于 src/theme-default/defaultTheme.ts由五份 CSS 变量文件组合而成export let defaultTheme: Theme { global, // spectrum-global.css 全局变量不随方案/缩放变化 light, // spectrum-light.css 浅色方案 dark: darkest, // spectrum-darkest.css 深色方案 medium, // spectrum-medium.css 中等缩放 large // spectrum-large.css 大号缩放 };仓库还额外提供lightThemesrc/theme-light/lightTheme.ts与darkTheme三者均从包入口导出。Button的交互示例使用了onPress而非onClick。这是 React Spectrum及其底层 React Aria的设计特色——onPress同时支持鼠标、键盘Enter/Space与触摸保证三种输入方式行为一致。variantcta属于旧版视觉变体cta | overBackground在 Button.tsx 中标记为deprecated新版推荐使用accent、primary、secondary、negative。五、Provider 深度解析主题、颜色方案与语言环境Provider是理解 React Spectrum 的关键。从 src/provider/types.ts 可以看到它支持的完整属性属性类型默认行为说明themeTheme无必填应用的视觉主题未提供时抛出theme not found错误colorSchemelight \| dark跟随操作系统偏好显式指定颜色方案defaultColorSchemelight \| darklight操作系统无偏好设置时的回退值scalemedium \| large依据设备指针类型控件尺寸档位触屏设备自动放大localestringBCP 47浏览器/OS 语言语言环境影响文案与日期数字格式化breakpointsBreakpoints{S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536}styleProps 响应式断点routerRouter无接入客户端路由使链接组件启用 SPA 导航isQuiet/isEmphasized/isDisabled/isRequired/isReadOnly/validationState布尔值 /ValidationState无向所有后代组件注入的公共状态主题强制与嵌套 ProviderProvider实现Provider.tsx要求theme必须存在否则直接抛错if (!theme) { throw new Error(theme not found, the parent provider must have a theme provided); }同时Provider支持嵌套内层Provider未显式指定的属性会从外层继承显式设置的属性则覆盖外层这正是颜色方案优先级显式 props 父 Provider 自动检测规则的实现见 Provider.tsx 第 58-75 行。利用这一点可以在应用的某个局部区域如设置面板临时切换主题或语言环境。应用级公共属性注入useProviderPropsProvider.tsx 第 223 行会把 Provider 上的isQuiet、isDisabled、isRequired等状态注入给所有后代组件。例如在表单场景中用一个Provider isRequired包裹整个表单即可让所有字段统一呈现必填样式无需逐个设置。六、主题定制与暗色模式自定义主题的本质是提供自己的 CSS 变量集合。标准做法是复制defaultTheme的结构global/light/dark/medium/large 五份 CSS替换其中的颜色变量来匹配品牌色然后传入Providerimport {Provider, Button} from adobe/react-spectrum; import myTheme from ./myTheme.css; function App() { return ( Provider theme{myTheme} Button variantprimary品牌化按钮/Button /Provider ); }暗色模式无需额外编码——只要主题对象包含dark变量集Provider就会自动跟随操作系统的深色外观偏好useColorScheme的实现见 Provider.tsx。另外ProviderWrapper 还会把当前颜色方案写入 DOM 的color-scheme样式见 Provider.tsx 第 169-179 行确保滚动条等浏览器原生 UI 也呈现正确的明暗配色。七、组件全家桶速览包的主入口 exports/index.ts 集中导出了全部组件与类型从源码可见覆盖的领域非常完整表单输入TextField、TextArea、NumberField、SearchField、Slider、RangeSlider、Checkbox、CheckboxGroup、Radio、RadioGroup、Switch日期与时间DateField、DatePicker、DateRangePicker、TimeField、Calendar、RangeCalendar选择类Picker、ComboBox、ListBox、ListView、Menu、ActionMenu、ActionGroup导航与内容Tabs、Breadcrumbs、Link、Accordion、Disclosure、Divider、Image、Avatar、Well状态反馈ProgressBar、ProgressCircle、Meter、StatusLight、InlineAlert、IllustratedMessage、Badge、Toast数据展示TableView含Column/Row/Cell、TreeView、TagGroup、LabeledValue布局与容器Flex、Grid含repeat/minmax/fitContent、View、Content、Header、Footer、Form、ButtonGroup弹层与浮层Dialog、AlertDialog、DialogTrigger、DialogContainer、Tooltip、MenuTrigger、ContextualHelp颜色控件ColorArea、ColorSlider、ColorWheel、ColorField、ColorSwatch、ColorPicker工具函数useAsyncList、useListData、useTreeData、useDragAndDrop、useCollator、useDateFormatter、useNumberFormatter等此外每个组件对应的实现位于 src 目录测试用例位于 test 目录需要深入某组件行为时可以直接在对应子目录如 src/button、src/table中阅读源码与测试。八、更进一步与 React Aria、React Stately 的分层使用README 的结尾明确指出React Spectrum 是「帮助你构建自适应、无障碍、健壮用户体验的库家族」中的一员。如果你不想要 Spectrum 的视觉样式而是希望基于自己的设计体系从零构建组件库可以使用React Ariapackages/react-aria获取无样式的无障碍行为钩子键盘导航、ARIA 属性、焦点管理等使用React Statelypackages/react-stately获取与 UI 无关的状态管理钩子列表、选择、日期、表单等状态逻辑将两者组合套上自己的样式即得到自研组件库的完整内核。这种行为层 状态层 样式层的三层解耦正是本仓库最具参考价值的架构设计。想要上手实践可以直接参考仓库中的示例工程如 examples/next-app 的 Next.js 集成、examples/rsp-next-ts 的 TypeScript 配置或阅读 packages/react-aria-componentsReact Aria 的无样式组件版了解 headless 组件的形态。小结React Spectrum 以四大特性无障碍、自适应、国际化、可定制主题为核心设计原则通过Provider单点配置主题、颜色方案、缩放与语言环境让开发者能够以极低的成本构建出与 Adobe 产品一致的、跨设备、跨语言的健壮界面。从本文的示例起步配合 exports 导出清单 与 src 目录 中的源码即可逐步掌握这套组件库的完整能力。【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考