Webflow Code Components 用于通过 DevLink 构建、定义并将 React 代码组件导入 Webflow。代码组件允许你在代码库中开发高级、可交互的 React 组件，并将其作为共享库部署到 Webflow，以便在画布上进行可视化组合。
用途
该技能面向需要在 Webflow 中使用自定义 React 组件的开发者，覆盖从项目搭建、组件定义、导入到画布使用的完整流程。
主要能力
- 使用 DevLink 将 React 代码组件导入 Webflow，作为共享库供可视化组合。
- 通过 declareComponent 定义组件在 Webflow 中的呈现方式。
- 支持 11 种属性类型：Text、Rich Text、Text Node、Link、Image、Number、Boolean、Variant、Visibility、Slot、ID。
- 使用 Webpack 打包库，最大 50MB。
- 支持 Tailwind、styled-components、Emotion、Material UI、Shadcn/UI、Sass、Less 等框架与库。
- 提供 CLI 命令、CI/CD 用法与故障排查参考。
使用方式
前置条件：Webflow 工作区需为 Freelancer、Core、Growth、Agency 或 Enterprise 计划（或站点为 CMS、Business、Enterprise），并需要 Node.js 20+ 与 npm 10+。
快速开始步骤：
- 设置项目——安装 CLI 与依赖。
- 创建 React 组件——构建标准 React 组件。
- 定义代码组件——创建包含 declareComponent 的 .webflow.tsx 文件。
- 导入到 Webflow——运行 npx webflow library share。
- 在画布上使用——在站点安装该库，然后拖放组件。
完整端到端教程见 references/quick-start.md。
关键概念
- Shadow DOM 隔离：每个组件的样式与 DOM 被沙箱化。
- 独立 React 根：组件之间不共享 React Context 或状态。可使用 URL 参数、浏览器存储、Nano Stores 或自定义事件。
- 默认 SSR：服务端渲染的 HTML 在客户端进行 hydration。对仅浏览器端组件可用 ssr: false 禁用。
- declareComponent：定义 React 组件在 Webflow 中的呈现方式，完整 API 见 references/hooks.md。
- 属性类型：共 11 种（Text、Rich Text、Text Node、Link、Image、Number、Boolean、Variant、Visibility、Slot、ID）。
- 打包：Webpack 打包你的库（最大 50MB）。
适用场景
适合在 Webflow 站点中嵌入自定义交互式 React 组件、以共享库方式在画布上复用组件，以及需要将代码库中的组件与 Webflow 可视化编辑结合的开发工作流。
限制与注意事项
- 文件名是唯一标识符。重命名 .webflow.tsx 文件会创建新组件并移除旧组件——站点上已有实例将失效。
- 不支持 React Server Components，仅使用标准 React 组件。
- 组件可在客户端获取数据，但 API 必须支持 CORS，且绝不能将 API 密钥嵌入组件代码。
参考文档
每个参考文件包含 YAML frontmatter（name、description、tags）以便搜索。可使用 scripts/search_references.py 查找相关参考。
入门：references/introduction.md（DevLink 与代码组件概览）、references/quick-start.md（从设置到画布的端到端教程）、references/installation.md（CLI 安装、webflow.json 配置、认证）。
构建组件：references/define-code-component.md（declareComponent、props、decorators、options）、references/hooks.md（declareComponent 与 useWebflowContext hook 参考）、references/component-architecture.md（Shadow DOM、SSR、状态模式、数据获取）、references/styling-components.md（Shadow DOM 中的 CSS、站点变量、标签选择器）、references/frameworks-and-libraries.md（Tailwind、styled-components、Emotion、Material UI、Shadcn/UI、Sass、Less）。
属性类型：references/prop-types.md 及 text、rich-text、text-node、link、image、number、boolean、variant、visibility、slot、id 各分册。
打包与 CLI：references/cli.md（Webflow CLI 命令、标志、CI/CD 用法、故障排查）、references/bundling-and-import.md（Webpack 打包、CLI 导入、CI/CD、调试）。
帮助：references/faq.md（设置、样式、导入、故障排查、性能常见问题）。
搜索参考：
列出所有参考及其元数据
python scripts/search_references.py --list
按标签搜索（精确匹配）
python scripts/search_references.py --tag <tag>
按关键词搜索（覆盖名称、描述、标签与内容）
python scripts/search_references.py --search <query>
仅搜索属性类型参考
python scripts/search_references.py --prop-types python scripts/search_references.py --prop-types --tag <tag> python scripts/search_references.py --prop-types --search <query>
脚本：scripts/search_references.py 可按标签、关键词搜索参考文件，或列出全部及其元数据。