react-popper 安装位置不正确
react-popper incorrect position on mount
我在 React 中构建了一个自定义树视图,每个项目都包含一个使用 Popper 定位的下拉列表。由于 child 元素在渲染时不可见,Popper 没有正确定位下拉列表,例如:
当树在山上打开时(即 children 可见),定位正确:
树中的每一层都是通过一个 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
。
根据文档,您可以手动更新 propper 实例,以便它重新计算工具提示位置:
Manual update
You can ask Popper to recompute your tooltip's position by running instance.update().
This method will return a promise, that will be resolved with the updated State, from where you will optionally be able to read the updated positions.
const state = await popperInstance.update();
当点击您的项目可见性切换时,您可以添加您的 popper 手动更新,如上面的代码行。
这里是 reference.
原来我们只需要将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();
};
我在 React 中构建了一个自定义树视图,每个项目都包含一个使用 Popper 定位的下拉列表。由于 child 元素在渲染时不可见,Popper 没有正确定位下拉列表,例如:
当树在山上打开时(即 children 可见),定位正确:
树中的每一层都是通过一个 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
。
根据文档,您可以手动更新 propper 实例,以便它重新计算工具提示位置:
Manual update
You can ask Popper to recompute your tooltip's position by running instance.update().
This method will return a promise, that will be resolved with the updated State, from where you will optionally be able to read the updated positions.
const state = await popperInstance.update();
当点击您的项目可见性切换时,您可以添加您的 popper 手动更新,如上面的代码行。
这里是 reference.
原来我们只需要将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();
};