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 處理程序。

重要的： 我們建議在您的元件上設定動態 props 之前諮詢熟悉 React 的人。

您可以將動態 prop 指派給 Webflow 中的主要元件或元件實例。若要實現此目的，請修改元件，然後繼續 元素設定面板 > 開發連結 > 動態道具，然後將其連結到屬性。 Webflow 中的屬性名稱也會與您的 React 項目中的屬性名稱相符。

在您的 React 專案中，您可以建立動態 prop 以從事件觸發功能（例如，互動、內容修改、樣式調整）。動態屬性接受一個物件值（例如，一個函數）。

貨櫃

容器是 DevLink 中的一個特殊屬性，它接受元件作為其值。容器使您能夠將元件嵌入到元件中 之內 你的 React 專案。當您擁有無法在Webflow 中本機建置的客製化React 元件（例如，如果元件依賴第三方程式庫或需要支援自訂邏輯），但您希望將它們嵌套在Webflow 製作的元件中時，這會很方便。

重要的： 我們建議在建立容器之前向有 React 經驗的人尋求建議。

若要在元件上配置容器屬性，請修改元件，導覽至 元素設定面板 > 開發連結 > 容器，然後將其與屬性關聯起來。

隨後，您可以將元件轉移到React元件的容器屬性中。 標誌槽= { } 將徽標嵌套在您的部門組件中。