4

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

在此处输入图像描述

当树在 mount 上打开时（即孩子们是可见的），定位是正确的：

在此处输入图像描述

树中的每个级别都通过一个组件呈现CategoryNavItem，它基本上看起来像这样：

<div className={ className.join(' ') }>
    <div className={ `collection-nav_item-link depth${depth}` } style={{ paddingLeft: `${paddingLeft}px`}}>
        <Link to={ linkTo } onClick={() => { setIsOpen(!isOpen) }}>
            <i className="collection-nav_item-link_icon"></i>
            <span className="collection-nav_item-link_text">{ category.name }</span>
        </Link>

        <Dropdown
            toggleClassName="btn-icon-white btn-sm"
            toggleContent={ <Icon name="ellipsis-h" />}
            position="bottom-end"
            size="small"
            items={[ 
                { text: 'Edit category' },
                { text: 'Add subcategory', onClick: (() => { dispatch(openAddSubcategory(category)) }) }
            ]} />
    </div>
    { children }
</div>

该Dropdown组件是我们使用 Popper 的地方，它在其他任何地方都可以正常工作。a 的可见性CategoryNavItem是通过组件在 React 中的状态来处理的。

有没有办法update()在 React 中以编程方式触发 Popper 的方法？我们应该update在切换项目的可见性时强制。

4

2 回答 2

7

原来我们只需update要从钩子中暴露属性usePopper，然后在设置下拉菜单的可见性时调用它，例如：

const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
    placement: placement,
    modifiers: [
        { name: 'arrow', options: { element: arrowElement } },
        { name: 'offset', options: { offset: [ 0, 3 ] } }
    ]
});

同样：

const toggleDropdown = (e) => {
    e.preventDefault();
    e.stopPropagation();

    setVisible(!visible);
    update();
};
于 2021-01-06T19:13:29.743 回答
0

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

手动更新

您可以要求 Popper 通过运行 instance.update() 重新计算工具提示的位置。

此方法将返回一个承诺，该承诺将使用更新的状态解决，您可以从中选择读取更新的位置。

const state = await popperInstance.update();

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

这是参考。

于 2021-01-06T09:19:45.623 回答