使用自定义Button组件时@radix-ui/react-dropdown-menu内容显示异常

问题原因 #

Radix UI的DropdownMenu.Trigger需要获取子元素的DOM ref来计算下拉内容的定位。你的自定义Button组件没有转发ref，导致Radix无法正确获取原生button的位置和尺寸信息，从而计算出错误的transform偏移值（translate3d(0px, -200%, 0px)）。

解决方案 #

将自定义Button组件用React.forwardRef包裹，确保Radix传递的ref能正确转发到内部的原生button元素上：

import * as React from "react";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

// 使用React.forwardRef转发ref
const Button = React.forwardRef((props, ref) => {
  return <button ref={ref} {...props} />;
});

export function App() {
  return (
    <div className="App">
      <div>
        <DropdownMenu.Root>
          <DropdownMenu.Trigger asChild>
            <Button type="button">test 1</Button>
          </DropdownMenu.Trigger>

          <DropdownMenu.Content>
            <DropdownMenu.Item>menu item</DropdownMenu.Item>
            <DropdownMenu.Item>menu item</DropdownMenu.Item>
            <DropdownMenu.Item>menu item</DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu.Root>
      </div>
    </div>
  );
}

补充说明 #

• 当使用Radix UI的asChild属性时，所有需要获取子元素DOM信息的组件（比如Trigger、Popper类组件）都要求子组件能正确接收并转发ref。
• 函数组件默认不接收ref，必须通过React.forwardRef显式转发；类组件则可以通过React.createRef或ref属性直接传递。

内容的提问来源于stack exchange，提问作者Alex CT