展开和折叠
此示例演示了如何在层次树结构中实现可展开和可折叠的节点。具有子节点的节点可以通过点击来展开或折叠，从而显示或隐藏它们的子节点。该实现使用了一个自定义的 useExpandCollapse 钩子，该钩子维护完整的图结构，同时只渲染当前可见的部分。
🌐 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.
This is a Pro example. Get all pro examples, templates, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.
关于此 Pro 示例
🌐 About this Pro Example
- 依赖: @xyflow/react , @dagrejs/dagre
- 实现了一个可重用的
useExpandCollapse钩子，用于处理可见性逻辑 - 演示动态节点添加和自动布局重新计算
- 使用节点数据属性来跟踪展开/折叠状态
- 提供交互式控件，用于展开/折叠节点和添加子节点
- 许可证：xyflow Pro 许可证
Last updated on