# @contentful/forma-36-react-components 中文文档 规范地址：https://npmcn.com/package/%40contentful/forma-36-react-components/ 版本：3\.100\.7 npm 元数据更新时间：2026-05-28T10:20:13.516Z 中文译文更新时间：2026-11-10T16:37:15.177Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40contentful/forma-36-react-components 原文对照：https://npmcn.com/package/%40contentful/forma-36-react-components/?lang=original 项目主页：https://github.com/contentful/forma-36#readme 源码仓库：https://github.com/contentful/forma-36 ## 关键信息（来自 npm 元数据） - 包体积（解压后）：2.5 MB，706 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：13 个 - peer 依赖：react ^16\.8\.6 \|\| ^17\.0\.0，react-dom ^16\.8\.6 \|\| ^17\.0\.0 - 首次发布：2018-11-19T10:24:52.225Z - 最新版本发布：2022-06-24T08:48:26.419Z - 近 30 天下载量：62445（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：571（近 12 个月 0 个） ## 中文简介 内容化 UI 组件库 ## 安装 ```sh npm install @contentful/forma-36-react-components ``` 也可以使用：`pnpm add @contentful/forma-36-react-components`、`yarn add @contentful/forma-36-react-components`、`bun add @contentful/forma-36-react-components` ## README # Forma 36 反应组件 **这是Forma 36的第3个版本,它不是当前版本的软件包. 从2022年7月12日起,它将不再得到支持. 请安装当前, 支持 [版本 4](https://www.npmjs.com/package/@contentful/f36-components) 图书馆** 用于 [福马 36](https://f36.contentful.com/) 设计系统 [内容](https://www.contentful.com/) 和动力 [故事书](https://storybook.js.org/)。 。 。 . 您可以随图书馆的最新变化访问故事书网站 [这里](https://f36-storybook.contentful.com/) ## 目录 - [目录](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-table-of-contents) - [安装软件包](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-installing-package) - [使用量](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-usage) - [导入想要的组件到您的工程中](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-import-desired-component-into-your-project) - [导入样式](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-import-styles) - [发展](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-development) - [故事书](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-storybook) - [示例组件目录结构](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-example-component-directory-structure) - [样式](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-styling) - [构成部分原则](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-component-principles) - [添加组件文件](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-adding-documentation-for-component) - [测试](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-testing) - [运行测试](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-run-tests) - [大楼](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-building) - [创建库的构建](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-create-a-build-of-the-library) - [提交](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-commits) - [阿尔法组件](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-alpha-components) ## 安装软件包 ```bash yarn add @contentful/forma-36-react-components ``` 或者说 ```bash npm install @contentful/forma-36-react-components ``` ## 使用量 ### 导入想要的组件到您的工程中 ```js import { Input } from '@contentful/forma-36-react-components'; ``` > 对于α阶段的组件,请检查其中的指令 [阿尔法组件](https://npmcn.com/package/%40contentful/forma-36-react-components/#readme-alpha-components) ### 导入样式 ```js import '@contentful/forma-36-react-components/dist/styles.css'; ``` ## 发展 为地方发展,在回波运行的根 `yarn` 以安装所有依赖关系,然后 `yarn build` 来构建所有软件包. 这个软件包依赖于其他几个Forma 36软件包,所以您需要构建所有软件包. ### 故事书 我们用 [故事书](https://storybook.js.org/) 为我们的组成部分图书馆创造一个发展环境。 要启动本地运行: ```bash yarn storybook ``` 要开始研究你的故事书中的组件,你需要为他们创作故事. 看那边 `src/components` 任意目录 `.stories.js` 文档。 故事书将自动包含带有 `.stories.js` 文件扩展名. 故事书配置于 [`scripts/.storybook/main.js`](https://npmcn.com/package/%40contentful/forma-36-react-components/scripts/.storybook/main.js)。 。 。 . ### 示例组件目录结构 组件目录应类似于以下内容: ``` YourComponent ├── index.js // A file for exporting your component ├── YourComponent.js // Your React component ├── YourComponent.css // Component styles ├── YourComponent.stories.js // Storybook for the component └── YourComponent.test.js. // Component tests ``` > 如果您使用 `yarn generate` 在 repo 根中,此结构将自动为您创建 ### 样式 我们正在使用 [postcs- preset-env (中文(简体) )](https://preset-env.cssdb.org/) 用来设计我们的部件 使用 postcs- preset-env 允许我们使用最新的 CSS 语法而无需等待浏览器支持. `tools/postcss.config.js` 用于添加插件和配置. ### 构成部分原则 我们在创建组成部分时遵循若干原则: 1. **一个部件只负责内部间隔** 我们遵循的原则是,一个组成部分应只负责自己的内部间隔,绝不是外部间隔。 这意味着,我们灵活地使用我们的组件,而不必超过边距. 2. **使用描述性propTypes** 我们建议为PropTypes制定下列命名公约,以便尽可能明确: - 数字 - 使用前缀或后缀来暗示道克接受一个数字. 举个例子. `numItems`, (中文(简体) ), `itemCount`, (中文(简体) ), `itemIndex` - Boolean - 使用前缀"is"/"can"/"has" 。 举个例子. `isVisible`, (中文(简体) ), `canExpand`, (中文(简体) ), `hasImage` - 阵列 - 使用复数名词. 举个例子. `items` - 对象 - 使用名词. 举个例子. `item` - 节点 - 使用后缀"节点". 举个例子. `containerNode` - 元素 - 使用后缀"元素". 举个例子. `triggerElement` - 事件处理器函数 - 使用前缀"on". 举个例子. `onOpen`, (中文(简体) ), `onClick` ### 添加组件文件 我们希望确保每个组成部分都包含一个包含建议和指导方针的README文件。 使用 `yarn add-readme` 它将为您指定组件生成一个模板README文件。 遵循CLI的步骤来创建新的README. 保证您的组件文档包含以下部分: 1. 构成部分摘要. 2. 变相/类型 - 尝试提供组件变体的概况. 3. 使用示例 - 尝试添加几个示例,包括导入 4. 内容建议 -- -- 关于信息或标题等组成部分所用内容的最佳做法的说明 5. 最佳做法 -- -- 尝试在几个要点中描述何时使用该部分 6. 无障碍----如果可能,我们强烈建议提供无障碍准则. ## 测试 我们正在使用 [欢乐](https://facebook.github.io/jest/) 财务报告和审定财务报表 [测试库](https://testing-library.com/docs/react-testing-library/intro/) 测试我们的组件. 测试保存在组件旁边,并使用 `.test.js` 文件扩展名. ### 运行测试 ```bash yarn test ``` 建议在开发中进行测试,可选 `--watch` 旗帜. ```bash yarn test --watch ``` ## 大楼 我们正在使用一个组合 [网络软件包](https://webpack.js.org/) 财务报告和审定财务报表 [宝贝](https://babeljs.io/) 创建我们的组件库。 我们使用 Webpack 与 `tools/webpack.production.config.js` 配置以构建一个样式表,其中包含所有用于我们组件的 CSS , 使用 extractTextPlugin 。 Babel用于将我们的React组件转换为CommonJS模块. Babel 和 Webpack 都输出到 `dist` 目录. ### 创建库的构建 ```bash yarn build ``` ## 提交 该项目使用 [Angular JS 提交信息公约](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit)通过语义释放。 见语义释出 [默认提交信件格式](https://github.com/semantic-release/semantic-release#default-commit-message-format) 详细情况. 您可以通过运行执行更改 ```bash yarn commit ``` ## 阿尔法组件 我们提供了一些不支持的α元件,并且会不经警告而发生断裂变化. 简而言之 - 冒着风险使用α组件. Alpha组件在主组件库捆绑外提供,可用如下: ```js import { MyAlphaComponent } from '@contentful/forma-36-react-components/dist/alpha'; ``` ## 常见问题 ### @contentful/forma-36-react-components 是什么？ 内容化 UI 组件库 ### 如何安装 @contentful/forma-36-react-components？ 在项目目录运行 npm install @contentful/forma-36-react-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.6 \|\| ^17\.0\.0）、react-dom（^16\.8\.6 \|\| ^17\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @contentful/forma-36-react-components 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @contentful/forma-36-react-components 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @contentful/forma-36-react-components 可以商用吗？ @contentful/forma-36-react-components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @contentful/forma-36-react-components 的下载量有多少？ 根据 npm 官方下载统计，@contentful/forma-36-react-components 在 2026/10/11 – 2026/11/09 这 30 天内被下载 62,445 次，日均约 2,082 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @contentful/forma-36-react-components 还在维护吗？ 最新版本 3\.100\.7 发布于 2022/06/24（4 年前）；至今共发布 571 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/11/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。