子流程

🌐 Sub Flows

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

🌐 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.

添加子节点

🌐 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.

在此示例中，我们通过传递 style 选项来设置父节点的固定宽度和高度。此外，我们将子节点的范围设置为 '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.

使用子节点特定选项

🌐 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:

边缘渲染行为

🌐 Edge rendering behavior

默认情况下，边会渲染在节点下方，这一行为适用于普通节点和组节点。然而，连接到有父节点的节点的边会渲染在节点上方。

🌐 Edges are rendered below nodes by default, and this behavior applies to both normal nodes and group nodes. However, edges connected to a node with a parent are rendered above nodes.

如果你想自定义边的 z-index，可以使用 zIndex 选项。例如：

🌐 If you want to customize the z-index of edges, you can use the zIndex option. For example:

const defaultEdgeOptions = { zIndex: 1 };
 
<ReactFlow defaultEdgeOptions={defaultEdgeOptions} />;

这允许你在节点上方渲染边，或根据需要调整它们的堆叠顺序。

🌐 This allows you to render edges above nodes or adjust their stacking order as needed.

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

🌐 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.