浮动-用户界面反应交互-如何设置浮动元素宽度与参考宽度相同

Question

在我的react应用程序中，我试图用floating-ui/react-dom-interactions构建下拉菜单(以前称为react-popper)。下面是我的组件演示的一个码箱链接。下面是应用程序当前状态的输出。

​

​

我想设置浮动元素宽度与引用元素相同。我试图从文档中跟踪这种方法，但没有得到所需的输出。如何设置浮动元素宽度与引用元素相同。

Answer 1

最后一个使用大小键的解决方案，如包中所定义的。

const { x, y, reference, floating, strategy, context } = useFloating({
    placement,
    open,
    middleware: [
      offset(4),
      size({
        apply({ rects, elements }) {
          Object.assign(elements.floating.style, {
            width: `${rects.reference.width}px`
          });
        }
      }),
      flip(),
      shift({ padding: 5 })
    ],
    onOpenChange: setOpen,
    whileElementsMounted: autoUpdate
  });

选中沙箱- https://codesandbox.io/s/angry-marco-4yhuer?file=/src/SecondaryCategoryItems.jsx

Answer 2

当我看到你有一个网格--网格-cols-4用于类别，这意味着每一个宽度都是25%，我可以建议一个解决方案而不深入讨论包的可能性，只需添加一个类，如

<div className={"bg-gray-700 py-2 text-white px-3 w-1/5 flex flex-col"}
  {...getFloatingProps({
  ref: floating,
  className: "Tooltip",
  style: {
    position: strategy,
    ref: floating,
    top: y ?? 0,
    left: x ?? 0,
  }
 })}
>

在index.css中定义样式，如

.Tooltip {
  background: #222;
  color: white;
  font-weight: bold;
  padding: 5px;
  border-radius: 4px;
  font-size: 90%;
  pointer-events: none;
  width: 25%;
}

Answer 3

另一种使用SecondaryCategoryItems paddings的解决方案，当我在主父服务器上签入px-8时，这意味着，从开始和结束，都可以通过网格和填充到组件，计算minWidth，比如minWidth：("100“/格栅)- (p / 4) + "%"。

沙箱示例- https://codesandbox.io/s/cold-monad-vqm7ch?file=/src/SecondaryCategoryItems.jsx:1304-1340