我在React中构建了一个自定义的树形视图,每个项都包含一个下拉菜单,使用Popper进行定位。由于子元素在渲染时不可见,因此Popper无法正确地定位下拉菜单,例如:
当树在挂载时处于打开状态(即子项可见)时,定位是正确的:
树中的每个级别都通过组件呈现,其基本上看起来像这样:
<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的地方,而且在其他地方都运行良好。在React中,<代码>CategoryNavItem的可见性是通过组件状态来处理的。有没有办法以编程方式在React中触发Popper的<代码>update()方法?我们应该在切换项目的可见性时强制执行<代码>update。
await update()
。 - Nathan