使用 TypeScript

React Flow 使用 TypeScript 编写，因为我们重视它提供的额外安全保障。我们导出您需要的所有类型，以便正确地为数据结构和传递给 React Flow 组件的函数进行类型化。我们还提供了一种扩展节点和边类型的方法。

基本用法

让我们从简单起点的最基本类型开始。 Typescript 可能会推断出其中一些类型，但我们将明确定义它们。

import { useState, useCallback } from 'react';
import {
  ReactFlow,
  addEdge,
  applyNodeChanges,
  applyEdgeChanges,
  type Node,
  type Edge,
  type FitViewOptions,
  type OnConnect,
  type OnNodesChange,
  type OnEdgesChange,
  type OnNodeDrag,
  type NodeTypes,
  type DefaultEdgeOptions,
} from '@xyflow/react';
 
const initialNodes: Node[] = [
  { id: '1', data: { label: 'Node 1' }, position: { x: 5, y: 5 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 5, y: 100 } },
];
 
const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
 
const fitViewOptions: FitViewOptions = {
  padding: 0.2,
};
 
const defaultEdgeOptions: DefaultEdgeOptions = {
  animated: true,
};
 
const nodeTypes: NodeTypes = {
  num: NumberNode,
  txt: TextNode,
};
 
const onNodeDrag: OnNodeDrag = (_, node) => {
  console.log('drag event', node.data);
};
 
function Flow() {
  const [nodes, setNodes] = useState<Node[]>(initialNodes);
  const [edges, setEdges] = useState<Edge[]>(initialEdges);
 
  const onNodesChange: OnNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes],
  );
  const onEdgesChange: OnEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges],
  );
  const onConnect: OnConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      nodeTypes={nodeTypes}
      edges={edges}
      edgeTypes={edgeTypes}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      onNodeDrag={onNodeDrag}
      fitView
      fitViewOptions={fitViewOptions}
      defaultEdgeOptions={defaultEdgeOptions}
    />
  );
}

自定义节点

在使用自定义节点时，您可以将自定义的 Node 类型（或您的 Node 联合）传递给 NodeProps 类型。基本上有两种方法可以使用自定义节点

如果您有 **多个自定义节点**，您希望将特定的 Node 类型作为泛型传递给 NodeProps 类型

NumberNode.tsx

import type { Node, NodeProps } from '@xyflow/react';
 
type NumberNode = Node<{ number: number }, 'number'>;
 
export default function NumberNode({ data }: NodeProps<NumberNode>) {
  return <div>A special number: {data.number}</div>;
}

⚠️ 如果您单独指定节点数据，则需要使用 type（在此处，interface 不起作用）

type NumberNodeData = { number: number };
type NumberNode = Node<NumberNodeData, 'number'>;

如果您有 **一个自定义节点**，它根据节点类型渲染不同的内容，您希望将您的 Node 联合类型作为泛型传递给 NodeProps

CustomNode.tsx

import type { Node, NodeProps } from '@xyflow/react';
 
type NumberNode = Node<{ number: number }, 'number'>;
type TextNode = Node<{ text: string }, 'text'>;
 
type AppNode = NumberNode | TextNode;
 
export default function CustomNode({ data }: NodeProps<AppNode>) {
  if (data.type === 'number') {
    return <div>A special number: {data.number}</div>;
  }
 
  return <div>A special text: {data.text}</div>;
}

自定义边

对于自定义边，您与自定义节点具有相同的可能性。

CustomEdge.tsx

import {
  getStraightPath,
  BaseEdge,
  type EdgeProps,
  type Edge,
} from '@xyflow/react';
 
type CustomEdge = Edge<{ value: number }, 'custom'>;
 
export default function CustomEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
}: EdgeProps<CustomEdge>) {
  const [edgePath] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
  return <BaseEdge id={id} path={edgePath} />;
}

高级用法

在使用 React Flow 创建复杂应用程序时，您将拥有许多自定义节点和边，每个节点和边都具有不同的数据附加到它们。当我们通过内置函数和钩子对这些节点和边进行操作时，我们必须确保我们缩小节点和边的类型，以防止运行时错误。

`Node` 和 `Edge` 类型联合

您将看到许多函数、回调和钩子（甚至 ReactFlow 组件本身）都期望 NodeType 或 EdgeType 泛型。这些泛型只是您应用程序中所有不同节点和边类型的联合。只要您正确地为数据对象进行了类型化（参见上一节），您就可以使用其导出的类型。

如果您使用任何内置节点（‘input’，‘output’，‘default’）或边（‘straight’，‘step’，‘smoothstep’，‘bezier’），您可以将从 @xyflow/react 导出的 BuiltInNode 和 BuiltInEdge 类型添加到您的联合类型中。

import type { BuiltInNode, BuiltInEdge } from '@xyflow/react';
 
// Custom nodes
import NumberNode from './NumberNode';
import TextNode from './TextNode';
 
// Custom edge
import EditableEdge from './EditableEdge';
 
export type CustomNodeType = BuiltInNode | NumberNode | TextNode;
export type CustomEdgeType = BuiltInEdge | EditableEdge;

传递给 `<ReactFlow />` 的函数

要接收回调函数的正确类型，您可以将联合类型传递给 ReactFlow 组件。通过这样做，您将必须显式地对回调函数进行类型化。

import { type OnNodeDrag } from '@xyflow/react';
 
// ...
 
// Pass your union type here ...
const onNodeDrag: OnNodeDrag<CustomNodeType> = useCallback((_, node) => {
  if (node.type === 'number') {
    // From here on, Typescript knows that node.data
    // is of type { num: number }
    console.log('drag event', node.data.number);
  }
}, []);
 
const onNodesChange: OnNodesChange<CustomNodeType> = useCallback(
  (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
  [setNodes],
);

钩子

类型联合也可以用于对许多钩子的返回值进行类型化。

FlowComponent.tsx

import {
  useReactFlow,
  useHandleConnections,
  useNodesData,
  useStore,
} from '@xyflow/react';
 
export default function FlowComponent() {
  // returned nodes and edges are correctly typed now
  const { getNodes, getEdges } = useReactFlow<CustomNodeType, CustomEdgeType>();
 
  // You can type useStore by typing the selector function
  const nodes = useStore((s: ReactFlowState<CustomNodeType>) => ({
    nodes: s.nodes,
  }));
 
  const connections = useHandleConnections({
    type: 'target',
  });
 
  const nodesData = useNodesData<CustomNodeType>(connections?.[0].source);
 
  nodeData.forEach(({ type, data }) => {
    if (type === 'number') {
      // This is type safe because we have narrowed down the type
      console.log(data.number);
    }
  });
  // ...
}

类型守卫

在 Typescript 中定义类型守卫的方法有很多。一种方法是定义类型守卫函数，例如 isNumberNode 或 isTextNode，以从节点列表中过滤出特定节点。

function isNumberNode(node: CustomNodeType): node is NumberNode {
  return node.type === 'number';
}
 
// numberNodes is of type NumberNode[]
const numberNodes = nodes.filter(isNumberNode);

快速开始幻灯片应用程序