Reactjs 反应提升阀在支座上的位置不正确

我在React中构建了一个自定义树视图，每个项目都包含一个下拉列表，该下拉列表使用Popper定位。由于子元素在渲染时不可见，Popper没有正确定位下拉列表，例如：

当树在支架上打开时（即孩子们可见），位置正确：

树中的每个级别都通过一个

CategoryNavItem

组件进行渲染，该组件基本上如下所示：

{setIsOpen（！isOpen）}}>
{category.name}
{分派（openAddSubcategory（category））}
]} />
{儿童}

下拉列表

组件是我们使用Popper的地方，它在其他任何地方都能正常工作。

CategoryNavItem

的可见性是通过组件在React中的状态来处理的

---

有没有办法在React中以编程方式触发Popper的

update（）

方法？切换项目的可见性时，我们应该强制更新。

根据文档，您可以手动更新propper实例，以便它重新计算工具提示位置：

手动更新 您可以让Popper通过运行instance.update（）重新计算工具提示的位置。

此方法将返回一个承诺，该承诺将通过更新状态进行解析，您可以选择从中读取更新的位置。

const state=await popperrinstance.update（）

单击项目可见性切换时，可以添加popper手动更新，如上面的代码行

以下是。
事实证明，我们只需要从
usePopper
钩子中公开
update
属性，然后在设置下拉列表的可见性时调用它，例如：

const{style，attributes，update}=usePopper（referenceElement，popperelation{
安置：安置，
修改器：[
{name:'arrow'，选项：{element:arrowElement}}，
{name:'offset'，选项：{offset:[0，3]}
]
});

同样地：

consttoggledropdown=（e）=>{
e、 预防默认值（）；
e、 停止传播（）；
setVisible（！visible）；
更新（）；
};
是的，这适用于通常的JS实现，但我们无法访问React中的popperInstance，因为它是通过Popper提供程序处理的；关于如何使用更新，库的hooks文档不是很清楚。非常感谢。