我如何将反应小popover popover附加到任意元素，而不是子元素

Question

React应用程序中有一个复杂的网格，我想在popover中显示与单元格相关的详细信息。我使用react-tiny-popover，但我的网格有很多单元和复杂的实现，所以标记Popover的标准方法是不可行的：

const DetailedCell = ({ details }) => <Popover content={details}> <Cell ... /> </Popover>; // Not feasible

相反，我将跟踪"；目标"；当前应显示详细信息的单元格。如何渲染附着到目标单元格并跟随它的单个Popover？

const DetailsPopover = () => undefined; // TODO how can this be implemented?
const MyPage = () => {
// ...
const [target, setTarget] = useState(null);
return <>
<ComplexGrid onSelectCell={setTarget} ... />
{target && <DetailsPopover target={target.domElement}>
Details of {getCellTitle(target)}: ...
</DetailsPopover>}
</>;
}

Answer 1

您可以使用React.forwardRef使用react-tiny-popoverv7 API实现DetailsPopover，方法是向Popover传递一个空组件，该组件将其引用"转发"到您想要的任何元素：

const RefTarget = React.forwardRef(({ target }, ref) => {
if (typeof ref === 'function') ref(target); // Forward target to callback refs.
else ref.current = target; // Forward target to object refs.
return null; // Don't render anything.
});
const TargetedPopover = ({ targetElement, children, ...props }) =>
<Popover isOpen={true} content={children} {...props}>
<RefTarget target={targetElement} />
</Popover>