コアコンセプト

次の部分では、React Flowのコアコンセプトを紹介し、インタラクティブなフローを作成する方法を説明します。フローはノードとエッジ（またはノードのみ）で構成されます。ReactFlowコンポーネントに、nodesとedgesの配列をpropsとして渡すことができます。ここで、すべてのノードとエッジのIDは一意である必要があります。ノードには位置とラベルが必要です（カスタムノードを使用している場合は異なる場合があります）。また、エッジにはソース（ノードID）とターゲット（ノードID）が必要です。オプションの詳細については、ノードオプションとエッジオプションのセクションをご覧ください。

制御型または非制御型

React Flowでは、フローを設定する方法が2つあります。制御型と非制御型のいずれかを作成できます。制御型を使用することをお勧めしますが、よりシンプルなユースケースでは、非制御型フローを設定することもできます。次の部分では、制御型フローを設定します。まず、ReactFlowコンポーネントにいくつかのノードとエッジを追加しましょう。

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

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

基本機能

デフォルトでは、React Flowは制御型フローを設定した場合、ビューポートの処理を除いて、内部状態の更新は行いません。<input />コンポーネントと同様に、React Flowによってトリガーされた変更をノードとエッジに適用するためのハンドラーを渡す必要があります。ノードとエッジを選択、ドラッグ、削除するには、onNodesChangeとonEdgesChangeハンドラーを実装する必要があります。

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

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

ここで何が起こっているのでしょうか？React Flowが変更をトリガーするたびに（ノードの初期化、ノードのドラッグ、エッジの選択など）、onNodesChangeハンドラーが呼び出されます。applyNodeChangesハンドラーをエクスポートしているため、変更を自分で処理する必要はありません。applyNodeChangesハンドラーは、更新されたノードの配列（新しいノード配列）を返します。これで、次の種類のインタラクションを備えたインタラクティブなフローが完成しました。

• 選択可能なノードとエッジ
• ドラッグ可能なノード
• 削除可能なノードとエッジ - （選択したノードまたはエッジを削除するにはBackspaceキーを押します。これは、deleteKeyCodeプロパティで調整できます）
• Shiftキーを押すことによる複数選択領域（これがデフォルトのselectionKeyCodeです）
• commandキーを押すことによる複数選択（これがデフォルトのmultiSelectionKeyCodeです）

便宜上、ノードとエッジの状態を作成するために使用できるヘルパーフックuseNodesStateとuseEdgesStateをエクスポートしています。

const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

ノードの接続

完全なインタラクティビティを実現するために欠けている最後の部分は、onConnectハンドラーです。新しい接続を処理するには、これを実装する必要があります。

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

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

この例では、新しく作成されたエッジを含むエッジの配列を返すaddEdgeハンドラーを使用しています。エッジが作成されるたびに特定のエッジオプションを設定する場合は、次のようにオプションを渡します。

const onConnect = useCallback(
  (connection) =>
    setEdges((eds) => addEdge({ ...connection, animated: true }, eds)),
  [setEdges],
);

または、defaultEdgeOptionsプロパティを使用します。

const defaultEdgeOptions = { animated: true };
...
<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
  defaultEdgeOptions={defaultEdgeOptions}
/>;