展开和折叠

本示例演示了如何在分层树结构中实现可展开和可折叠的节点。带有子节点的节点可以通过点击展开或折叠，从而显示或隐藏其后代节点。该实现使用自定义的 useExpandCollapse hook，该 hook 维护完整的图形结构，同时仅渲染当前可见部分。

¥This example demonstrates how to implement expandable and collapsible nodes in a hierarchical tree structure. Nodes with children can be expanded or collapsed by clicking on them, revealing or hiding their descendants. The implementation uses a custom useExpandCollapse hook that maintains the complete graph structure while only rendering the currently visible portions.

关于此 Pro 示例

¥About this Pro Example

• 依赖：@xyflow/react , @dagrejs/dagre 

  ¥Dependencies: @xyflow/react , @dagrejs/dagre 

• 实现可重用的 useExpandCollapse 钩子，用于处理可见性逻辑

  ¥Implements a reusable useExpandCollapse hook that handles visibility logic

• 演示动态节点添加和自动布局重新计算

  ¥Demonstrates dynamic node addition with automatic layout recalculation

• 使用节点数据属性来跟踪展开/折叠状态

  ¥Uses node data properties to track expanded/collapsed state

• 提供交互式控件，用于展开/折叠节点和添加子节点

  ¥Provides interactive controls to expand/collapse nodes and add children

• 许可证：xyflow 专业版许可证 

  ¥License: xyflow Pro License