@radix-ui/react-dropdown-menu 内容显示不正确

Question

我在触发器内使用 @radix-ui/react-dropdown-menu 和 Button 组件（带有

asChild

属性），下拉内容显示不正确（如果我用 html 按钮替换 Button，内容会正常显示） ).

由于某种原因，当我使用 Button 组件时，下拉内容 css 是这样的

transform: translate3d(0px, -200%, 0px)

，但是当我使用 html 按钮时，一切正常

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

const Button = (props) => {
  return <button {...props} />;
};

export function App() {
  return (
    <div className="App">
      <div>
        <DropdownMenu.Root>
          <DropdownMenu.Trigger asChild>
            <Button type="button">test 1</Button>
            {/* <button type="button">test 2</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>
  );
}

Answer 1

还花了很多时间围绕这个“forwardRef”，但如果您有一个 组件（如本例所示），它将不起作用，只有当您使用 标签

时它才会起作用

这是一个带有forwardRef的示例 - https://codesandbox.io/s/dependent-fast-rifc6?file=/App.js:3996-4176

所以，解决方案比我想象的要简单 只需将组件包装到“DIV”中即可

<DropdownMenu.Trigger asChild>
  <div>
    <Button type="button">test 1</Button>
  </div>       
</DropdownMenu.Trigger>