子流程

¥Sub Flows

弃用 parentNode 属性！我们在版本 11.11.0 中将 parentNode 选项重命名为 parentId。旧属性仍然受支持，但将在版本 12 中删除。

¥Deprecation of parentNode property! We have renamed the parentNode option to parentId in version 11.11.0. The old property is still supported but will be removed in version 12.

子流是节点内的流。它可以是单独的流，也可以是与其父级之外的其他节点连接的流。此功能还可用于对节点进行分组。在本部分文档中，我们将构建一个带有子流程的流程，并向你展示子节点特定的选项。

¥A sub flow is a flow inside a node. It can be a separate flow or a flow that is connected with other nodes outside of its parent. This feature can also be used for grouping nodes. In this part of the docs we are going to build a flow with sub flows and show you the child node specific options.

Order of Nodes 重要的是，你的父节点必须在 nodes/defaultNodes 数组中出现在其子节点之前，以便正确处理。

¥Order of Nodes It’s important that your parent nodes appear before their children in the nodes/ defaultNodes array to get processed correctly.

添加子节点

¥Adding Child Nodes

如果你想要将一个节点添加为另一个节点的子节点，则需要使用 parentId（在以前的版本中称为 parentNode）选项（你可以在节点选项部分中找到所有选项的列表）。完成此操作后，子节点将相对于其父节点定位。{ x: 0, y: 0 } 的位置是父级的左上角。

¥If you want to add a node as a child of another node you need to use the parentId (this was called parentNode in previous versions) option (you can find a list of all options in the node options section). Once we do that, the child node is positioned relative to its parent. A position of { x: 0, y: 0 } is the top left corner of the parent.

在此示例中，我们通过传递样式选项来设置父节点的固定宽度和高度。此外，我们将子范围设置为 'parent'，这样我们就不能将子节点移出父节点。

¥In this example we are setting a fixed width and height of the parent node by passing the style option. Additionally, we set the child extent to 'parent' so that we can’t move the child nodes out of the parent node.


import { useCallback, useState } from 'react';
import {
  ReactFlow,
  addEdge,
  applyEdgeChanges,
  applyNodeChanges,
  Background,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { initialNodes } from './nodes';
import { initialEdges } from './edges';
 
const rfStyle = {
  backgroundColor: '#D0C0F7',
};
 
function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  const onNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges],
  );
  const onConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
      style={rfStyle}
      attributionPosition="top-right"
    >
      <Background />
    </ReactFlow>
  );
}
 
export default Flow;

使用子特定选项

¥Using Child Specific Options

当你移动父节点时，你会看到子节点也会移动。使用 parentId 选项将节点添加到另一个节点只会做一件事：它将其相对于其父级定位。子节点实际上不是子标记。你可以将子节点拖动或定位在其父节点之外（当未设置 extent: 'parent' 选项时），但当你移动父节点时，子节点会随之移动。

¥When you move the parent node you can see that the child nodes move, too. Adding a node to another node with the parentId option, just does one thing: It positions it relatively to its parent. The child node is not really a child markup-wise. You can drag or position the child outside of its parent (when the extent: 'parent' option is not set) but when you move the parent, the child moves with it.

在上面的示例中，我们使用 group 类型作为父节点，但你也可以使用任何其他类型。group 类型只是一种没有附加句柄的便利节点类型。

¥In the example above we are using the group type for the parent node but you can use any other type as well. The group type is just a convenience node type that has no handles attached.

现在我们将添加更多节点和边。如你所见，我们可以连接组内的节点并创建从子流到外部节点的连接：

¥Now we are going to add some more nodes and edges. As you can see, we can connect nodes within a group and create connections that go from a sub flow to an outer node:


import { useCallback, useState } from 'react';
import {
  ReactFlow,
  addEdge,
  applyEdgeChanges,
  applyNodeChanges,
  Background,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { initialNodes } from './nodes';
import { initialEdges } from './edges';
 
const rfStyle = {
  backgroundColor: '#D0C0F7',
};
 
function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  const onNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges],
  );
  const onConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
      style={rfStyle}
      attributionPosition="top-right"
    >
      <Background />
    </ReactFlow>
  );
}
 
export default Flow;

使用默认节点类型作为父节点

¥Using a Default Node Type as a Parent

让我们删除节点 B 的标签并添加一些子节点。在此示例中，你可以看到你也可以使用默认节点类型之一作为父节点。我们还将子节点设置为 draggable: false，这样它们就不再可拖动了。

¥Let’s remove the label of node B and add some child nodes. In this example you can see that you can use one of the default node types as parents, too. We also set the child nodes to draggable: false so that they are not draggable anymore.


import { useCallback, useState } from 'react';
import {
  ReactFlow,
  addEdge,
  applyEdgeChanges,
  applyNodeChanges,
  Background,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { initialNodes } from './nodes';
import { initialEdges } from './edges';
 
const rfStyle = {
  backgroundColor: '#D0C0F7',
};
 
function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  const onNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges],
  );
  const onConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
      style={rfStyle}
      attributionPosition="top-right"
    >
      <Background />
    </ReactFlow>
  );
}
 
export default Flow;