FloatingUI 中 FloatingPortal 组件根节点选择问题解析

问题背景

在 React 生态系统中，FloatingUI 是一个流行的 UI 组件库，它提供了浮动元素（如工具提示、下拉菜单等）的实现方案。其中，FloatingPortal 组件负责将浮动内容渲染到 DOM 中的特定位置，通常是一个 portal 节点。

在 FloatingUI 版本 0.26.7 中引入了一个修复 "无条件渲染与 Suspense" 的功能后，用户报告了一个关于 FloatingPortal 组件无法正确识别自定义根节点的问题。具体表现为，即使开发者明确指定了 root 属性，组件仍然会将内容渲染到默认的 body 节点中。

问题分析

这个问题的核心在于 FloatingPortal 组件的渲染时机和根节点选择的逻辑。根据问题描述和讨论，我们可以总结出以下几点关键信息：

1. 渲染时机问题：当 FloatingPortal 组件在 JSX 中被渲染时，它会在挂载时立即尝试查找根节点。如果此时指定的根节点尚不可用，组件会回退到使用 body 作为默认根节点。

2. 条件渲染的重要性：问题讨论中提到的解决方案是将 FloatingPortal 组件包裹在条件渲染逻辑中（如 {visible && <FloatingPortal>}），这确保了只有当根节点确实可用时才会渲染 Portal 内容。

3. 版本差异：在 0.26.6 版本中，这个行为可能是不同的，导致开发者没有意识到需要条件渲染。版本 0.26.7 的修改改变了这一行为，使得问题显现出来。

技术原理

在 React 中，Portal 是一种将子节点渲染到 DOM 中不同位置的技术。FloatingUI 的 FloatingPortal 组件在此基础上增加了对 Suspense 的支持和更灵活的根节点选择能力。

当开发者指定 root 属性时，组件应该：

1. 检查 root 是否可用
2. 如果可用，使用指定的 root
3. 如果不可用，根据策略决定是等待还是回退到默认 body

在 0.26.7 版本中，为了支持 Suspense，这个逻辑可能被修改为更倾向于立即渲染，导致在根节点尚未准备好时就回退到 body。

解决方案

根据讨论，有两种可行的解决方案：

1. 条件渲染（推荐）： 将 FloatingPortal 组件包裹在条件渲染逻辑中，确保只有在根节点确实可用时才渲染：

   {visible && (
     <FloatingPortal root={portalNode}>
       {/* 浮动内容 */}
     </FloatingPortal>
   )}
   

2. 内部修复： 从库的角度，可以修改内部逻辑，当 root 属性被明确指定时，等待该节点可用而不是立即回退到 body。这需要：

   • 区分未指定的 root 和指定但暂不可用的 root
   • 对于指定但不可用的 root，可以等待或返回 null

最佳实践

基于这个问题，我们可以总结出使用 FloatingPortal 组件时的几个最佳实践：

1. 始终考虑条件渲染：特别是当根节点可能不会立即可用时（如跨窗口渲染、异步加载的节点等）。

2. 明确处理 null 情况：如果获取根节点的函数可能返回 null，应该确保有相应的处理逻辑。

3. 注意版本差异：在升级 FloatingUI 版本时，特别是涉及 Portal 相关功能时，要仔细测试渲染行为。

4. 跨窗口场景的特殊处理：如问题中提到的跨 window 渲染，要确保目标窗口和文档已经完全加载。

总结

FloatingUI 的 FloatingPortal 组件提供了强大的 portal 功能，但在使用时需要注意渲染时机和根节点可用性问题。通过合理的条件渲染策略，可以确保内容被正确地渲染到预期的位置。这个问题也提醒我们，在使用任何 UI 库的 portal 功能时，都应该仔细考虑组件的渲染时机和目标节点的生命周期。

对于库开发者而言，这个问题也展示了在支持新功能（如 Suspense）时可能引入的边界情况，需要在功能完整性和向后兼容性之间找到平衡。