react-popper 安装位置不正确 手动更新

编程问答 2022-05-31

问题描述

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

enter image description here

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

enter image description here

树中的每一层都通过一个 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 的地方，它在其他任何地方都运行良好。 CategoryNavItem 的可见性通过 React 中组件的状态进行处理。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

popper.jsreact-popperreactjsreactjs