webflow-code-components

Webflow 代码组件

使用 DevLink 在 Webflow 中构建、定义并导入 React 代码组件。代码组件让你可以在代码库中开发高级交互式 React 组件，并将其部署到 Webflow，作为共享库供你在画布上进行可视化组合。

快速入门

**前提条件：**使用 Freelancer、Core、Growth、Agency 或 Enterprise 套餐的 Webflow Workspace（或使用 CMS、Business 或 Enterprise 套餐的站点）。Node.js 20+ 和 npm 10+。

1. 设置项目 — 安装 CLI 和依赖项
2. 创建 React 组件 — 构建标准 React 组件
3. 定义代码组件 — 创建包含 declareComponent 的 .webflow.tsx 文件
4. 导入到 Webflow — 运行 npx webflow library share
5. 在画布上使用 — 在站点上安装该库，然后拖放组件

完整的端到端教程请参阅 references/quick-start.md。

核心概念

• Shadow DOM 隔离 — 每个组件的样式和 DOM 都在各自的沙箱中
• 独立的 React 根节点 — 组件之间不共享 React Context 或状态。请使用 URL 参数、浏览器存储、Nano Stores 或自定义事件
• 默认启用 SSR — HTML 由服务器渲染，并在客户端完成水合。对于仅限浏览器的组件，可通过 ssr: false 禁用
• declareComponent — 定义 React 组件在 Webflow 中的显示方式。完整 API 请参阅 references/hooks.md
• 属性类型 — 提供 11 种类型（Text、Rich Text、Text Node、Link、Image、Number、Boolean、Variant、Visibility、Slot、ID）
• 打包 — Webflow 使用 Webpack 打包库（最大 50MB）

重要说明

• **文件名是唯一标识符。**重命名 .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、属性、装饰器和选项
• 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：所有属性类型的用法、返回值和示例
• references/prop-types/text.md：文本 — 单行文本输入
• references/prop-types/rich-text.md：富文本 — 格式化的 HTML 内容
• references/prop-types/text-node.md：文本节点 — 可在画布上编辑的文本
• references/prop-types/link.md：链接 — 带有目标和预加载选项的 URL
• references/prop-types/image.md：图片 — 从资源库中选择图片
• references/prop-types/number.md：数字 — 带范围控制的数值输入
• references/prop-types/boolean.md：布尔值 — true/false 切换
• references/prop-types/variant.md：变体 — 预定义选项下拉菜单
• references/prop-types/visibility.md：可见性 — 显示/隐藏切换
• references/prop-types/slot.md：插槽 — 插入子组件
• references/prop-types/id.md：ID — HTML 元素标识符

打包与命令行

• references/cli.md：Webflow 命令行工具命令、标志、CI/CD 用法和故障排查
• references/bundling-and-import.md：Webpack 打包、命令行工具导入、CI/CD 和调试

帮助

• references/faq.md：常见问题 — 设置、样式、导入、故障排查和性能

搜索参考资料

# List all references with metadata
python scripts/search_references.py --list

# Search by tag (exact match)
python scripts/search_references.py --tag <tag>

# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>

# Search only prop type references
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：按标签或关键词搜索参考文件，或列出所有文件及其元数据