React useState boolean 问题（功能组件）

Question

我在使用 React 功能组件中的useState和 state 更改时遇到问题。 我正在使用一个名为Menu的导入 package，它采用一个名为“ isOpen ”的道具 - 当设置为 true 时，将显示菜单（类似于模式）。

当我单击菜单模式中的“关闭菜单”按钮时，menuOpen 的menuOpen变为 false - 但是， isOpen 道具不会从 true 切换到 false - 因此菜单不会关闭。 或者我在这里错过了什么吗？

const MenuButton: React.FC<Props> = () => {
  const [menuOpen, setMenuOpen] = useState(false)
  const openMenu = () => {
  setMenuOpen(true)
}

const closeMenu = () => {
  setMenuOpen(false)
}

 return (
 <Menu buttonNode={<Button onClick={openMenu}>Open 
 Menu</Button>} isOpen={menuOpen}>
   <Box>
     <Text>Menu Heading</Text>
     <Button onClick={closeMenu}>Close Menu</Button>
   </Box>
 </Menu>
 )
}

Answer 1

'pcln-menu' package 绝对是一个问题，因为它的开发人员在设计组件的 state 时不使用单一事实来源原则。

您应该将菜单内容作为renderContent属性传递以获取handleClose回调。 尝试这个：

const MenuButton = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const openMenu = () => {
    setMenuOpen(true);
  };

  return (
    <Menu
      buttonNode={<Button onClick={openMenu}>Open Menu</Button>}
      isOpen={menuOpen}
      renderContent={({handleClose}) => (
        <Box>
          <Text>Menu Heading</Text>
          <Button onClick={handleClose}>Close Menu</Button>
        </Box>
      )}
    ></Menu>
  );
};