Javascript 用两个不同的按钮打开菜单

似乎您所需要做的就是创建一个调度程序，该调度程序将切换状态以触发页面的重新呈现.

const MyDropdownMenu = ({ isOpen, onToggle }) => (
  <DropdownMenu.Root open={isOpen} onOpenChange={onToggle}>
    <DropdownMenu.Trigger>
      <NewIcon />
    </DropdownMenu.Trigger>

    <DropdownMenu.Portal forceMount>
      <DropdownMenu.Content>
        {/*content */}
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  </DropdownMenu.Root>
);

const AnotherComponent = ({ onToggle }) => (
  <div>
    <Button onClick={onToggle}>
      Edit information
    </Button>

    <MyDropdownMenu isOpen={false} onToggle={onToggle} />
  </div>
);

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen((prevIsOpen) => !prevIsOpen);
  };

  return <AnotherComponent onToggle={toggleDropdown} />;
};

export default App;

您可以将其用于任何您喜欢的状态管理器.唯一会改变的是数据存储的位置.

根据您的 comments 扩展了一个例子.

    const MyDropdownMenu = ({ isOpen, onToggle }) => (

      const handler = () => {
        console.log(`MyDropdownMenu`);
        onToggle();
      }
      <DropdownMenu.Root open={isOpen} onOpenChange={handler}>
        <DropdownMenu.Trigger>
          <NewIcon />
        </DropdownMenu.Trigger>

        <DropdownMenu.Portal forceMount>
          <DropdownMenu.Content>
            {/*content */}
          </DropdownMenu.Content>
        </DropdownMenu.Portal>
      </DropdownMenu.Root>
    );

    const AnotherComponent = ({ onToggle }) => (
      const handler = () => {
        console.log(`MyDropdownMenu`);
        onToggle();
      }
      <div>
        <Button onClick={handler}>
          Edit information
        </Button>

        <MyDropdownMenu isOpen={false} onToggle={onToggle} />
      </div>
    );

    const App = () => {
      const [isOpen, setIsOpen] = useState(false);

      const toggleDropdown = () => {
        setIsOpen((prevIsOpen) => !prevIsOpen);
      };

      return <AnotherComponent onToggle={toggleDropdown} />;
    };

    export default App;