フローの構築

このセクションでは、制御されたフローコンポーネントを作成する方法について説明します。React FlowをReactプロジェクトにインストールしたので、React Flowを使い始めるためのすべてのファイルが揃っています。

はじめに

コントロールパネルと背景を持つ空のフローを作成しましょう。これには、reactflowパッケージからコンポーネントをインポートする必要があります。

import { ReactFlow, Background, Controls } from '@xyflow/react';

これでコンポーネントを使用して空のフローをレンダリングできます

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

ここで注意すべき3つの重要な点があります

1. スタイルをインポートする必要があります。そうしないと、React Flowは機能しません。
2. 親コンテナには幅と高さが必要です。React Flowは親の寸法を使用するためです。
3. 1つのページに複数のフローがある場合は、各コンポーネントに一意のidプロパティを渡して、React Flowが正しく機能するようにする必要があります。

ノードの追加

フローが設定されたので、ノードを追加しましょう。これを行うには、次のようなノードオブジェクトの配列を作成する必要があります。

const nodes = [
  {
    id: '1', // required
    position: { x: 0, y: 0 }, // required
    data: { label: 'Hello' }, // required
  },
];

これらのノードはフローに追加できるようになりました

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

別のノードを追加し、ラベルを構成し、最初のノードにノードタイプinputを使用しましょう。

const nodes = [
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: { label: 'Hello' },
    type: 'input',
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'World' },
  },
];

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

ノードを構成する方法はたくさんあります。ノードオプションサイトでオプションの完全なリストを確認できます。

良さそうですね。これらの2つのノードを接続しましょう。

エッジの追加

これで2つのノードができたので、エッジで接続しましょう。

エッジを作成するには、2つの属性を指定する必要があります。ソースノード（エッジが始まる場所）とターゲットノード（エッジが終わる場所）です。これには、2つのノードのidを使用します（この例では、2つのノードのidは「1」と「2」です）。

const edges = [{ id: '1-2', source: '1', target: '2' }];

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

このエッジに、React Flowに組み込まれている2つのプロパティ、labelと異なるtypeを指定しましょう。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

最初の縁を作成しました、よくできました！ノードをドラッグまたは選択できないことに気づいたかもしれません。次のパートでは、フローをインタラクティブにする方法を学びます。