Creator 中的 DevLink

DevLink 允许您直接在 Webflow Creator 中构建 React 元素。作为创建者，您现在拥有更直接的方法将设计传输给程序员。DevLink 还促进了 CSS 和组件属性的同步，以便您的程序员自动收到可用于生产的 React 组件。

重要的： 本指南阐述了 Webflow Creator 中 DevLink 的独特 UI。要了解如何激活和使用 DevLink 的代码同步，请参阅我们广泛的 DevLink 开发人员 documentation.

本文将涵盖：

1. 创作者和程序员工作流程的最佳实践
2. 造型建议
3. Webflow Creator 中的 DevLink 设置
4. 属性
5. 动态道具
6. 容器

创作者和程序员工作流程的最佳实践

在与程序员合作时，我们建议创作者明确沟通他们修改了哪些组件以及何时准备好。由于 DevLink 的同步会覆盖全局样式和预先存在的组件，因此可能会抹去程序员在 React 中的努力。

虽然有解决方法（例如，如果程序员希望在不被新同步所掩盖的情况下更新组件，则可以从 DevLink 目录中重新定位组件），但最好的方法是让创建者标出自上次同步以来修改的组件。在这种情况下，创建者利用站点活动日志可能会有所帮助。

造型建议

在设置元素样式时，请确保将样式应用于组件本身，而不是将其设置在 Body 元素上。在 Body 上设置的任何样式都不会包含在您的 React 组件中。

Webflow Creator 中的 DevLink 设置

您可以在 Webflow Creator 的“组件”面板中找到关键的 DevLink 指令和配置代码。这包括安装、配置 React 项目以及将 Webflow 与 React 项目同步的指令。当程序员使用 DevLink 将 Webflow 与他们的 React 项目同步时，在 Webflow Creator 中所做的任何更改都将体现在代码中。

要访问参考模式，请导航至 元件面板 并选择“导出组件”图标位于面板右上角。

属性

DevLink 支持组件属性，允许您在组件实例上定义不同的值。如果您的应用程序具有重复的布局模式，而内部内容会变化或隐藏，那么这将非常有用。属性使您可以灵活地在组件的每个实例上修改此内容。

在设计过程中，您可以在组件实例中的元素上定义属性。Webflow 中的属性名称也将对应于 React 组件中的属性名称。随后，您可以在 React 项目中指定组件属性值。这为您提供了更大的更新组件内容的灵活性 - 您可以在 Webflow 中执行此操作， 或者 直接在你的 React 项目中。

重要的： DevLink 单向运行，不会将 React 更新传回 Webflow。

探索有关定义组件属性的更多信息。

动态道具

动态道具 是 DevLink 中的专用属性，您可以将其附加到 Webflow 中的组件，以便在 React 项目中应用。动态属性使您可以将更复杂的属性合并到 Webflow 目前不支持的开箱即用的组件中，例如自定义的 onClick 处理程序。

重要的： 我们建议在组件上设置动态道具之前咨询熟悉 React 的人员。

您可以在 Webflow 中将动态道具分配给主要组件或组件实例。为此，请修改组件，然后继续 元素设置面板 > DevLink > 动态道具，然后将其链接到一个属性。Webflow 中的属性面额也将与您的 React 项目中的属性名称相匹配。

在你的 React 项目中，你可以创建动态 prop 来从事件触发某个函数（例如交互、内容修改、样式调整）。动态 prop 接受一个对象值（例如函数）。

容器

容器是 DevLink 中的一个特殊属性，它接受组件作为其值。容器使您可以将组件嵌入到组件中 之内 您的 React 项目。当您拥有无法在 Webflow 中原生构建的定制 React 组件（例如，如果组件依赖于第三方库或需要支持自定义逻辑），但您希望将它们嵌套在 Webflow 制作的组件中时，这非常有用。

重要的： 我们建议在建立容器之前向有 React 经验的个人寻求建议。

要配置组件上的容器属性，修改组件，导航到 元素设置面板 > DevLink > 容器，然后将其与某个属性关联起来。

随后，您可以将组件转移到 React 组件的容器属性中。例如，如果您拥有一个徽标组件和一个具有“logoSlot”容器属性的分区组件，则可以刻上 徽标槽 = { } 将徽标嵌套在部门组件内。