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の設定

重要な DevLink ディレクティブと構成コードは、Webflow Creator のコンポーネント パネルで見つけることができます。これには、インストール、React プロジェクトの構成、および Webflow と React プロジェクトの同期に関するディレクティブが含まれます。プログラマーが DevLink を使用して Webflow を React プロジェクトと同期すると、Webflow Creator で行われた変更がコードに反映されます。

参照モーダルにアクセスするには、 コンポーネントパネル 「コンポーネントをエクスポートするパネルの右上にある「 」アイコンをクリックします。

属性

DevLink はコンポーネント属性をサポートしており、コンポーネント インスタンスに個別の値を定義できます。これは、アプリケーションに、内部コンテンツが変化したり非表示になったりする繰り返しレイアウト パターンがある場合に役立ちます。属性により、コンポーネントの各インスタンスでこのコンテンツを柔軟に変更できるようになります。

設計中に、コンポーネントインスタンスの要素に属性を定義できます。Webflow での属性の名称は、React コンポーネントでの属性の指定にも対応します。その後、React プロジェクトでコンポーネント属性の値を指定できます。これにより、コンポーネントコンテンツの更新の柔軟性が向上します。Webflow でこれを行うことができます。 または React プロジェクトで直接実行します。

重要： DevLink は一方向に動作し、React の更新を Webflow に送り返しません。

コンポーネント属性の定義についてさらに詳しく調べます。

ダイナミックな小道具

ダイナミックな小道具 は、React プロジェクトに適用するために Webflow のコンポーネントに追加できる DevLink の特殊なプロパティです。動的プロパティを使用すると、カスタマイズされた onClick ハンドラーなど、Webflow が現在すぐにはサポートしていない、より複雑なプロパティをコンポーネントに組み込むことができます。

重要： コンポーネントに動的プロパティを設定する前に、React に精通した個人に相談することをお勧めします。

Webflowでは、プライマリコンポーネントまたはコンポーネントインスタンスに動的プロパティを割り当てることができます。これを実現するには、コンポーネントを変更し、 要素設定パネル > 開発リンク > ダイナミックな小道具、それをプロパティにリンクします。Webflow のプロパティの名称は、React プロジェクトのプロパティの名前とも一致します。

React プロジェクトでは、イベントから関数 (インタラクション、コンテンツの変更、スタイルの調整など) をトリガーする動的プロパティを設定できます。動的プロパティは、オブジェクト値 (関数など) を受け入れます。

コンテナ

コンテナはDevLinkの特殊なプロパティで、コンポーネントを値として受け入れます。コンテナを使用すると、コンポーネント内にコンポーネントを埋め込むことができます。 内で React プロジェクト。これは、Webflow でネイティブに構築できないカスタマイズされた React コンポーネント (たとえば、コンポーネントがサードパーティのライブラリに依存している場合や、カスタム ロジックのサポートが必要な場合) があり、それらを Webflow で作成されたコンポーネントにネストしたい場合に便利です。

重要： コンテナを構築する前に、React に精通した人に相談することをお勧めします。

コンポーネントのコンテナプロパティを構成するには、コンポーネントを変更し、 要素設定パネル > 開発リンク > 容器、それをプロパティに関連付けます。

その後、コンポーネントをReactコンポーネントのコンテナプロパティに転送できます。例として、ロゴコンポーネントと「logoSlot」コンテナプロパティを持つ分割コンポーネントを所有している場合は、次のように記述できます。 ロゴスロット = { } 部門コンポーネント内にロゴをネストします。