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>
  );
};