React Hooks - 汉堡菜单

Question

我正在尝试使用 React Hooks 在我的项目网站上实现汉堡菜单，但在控制台中遇到了一些不同的错误。启动时菜单可见，按钮无效。

Warning: Failed prop type: Invalid prop open of type object supplied to Burger, expected boolean.

Warning: Failed prop type: Invalid prop setOpen of type object supplied to Burger, expected function.

Uncaught TypeError: setOpen is not a function

请看下面的代码：

Burger.js

import React from 'react';
import { bool, func } from 'prop-types';
import { StyledBurger } from './BurgerStyles';

const Burger = ({ open, setOpen }) => {
  return (
    <StyledBurger open={open} onClick={() => setOpen(!open)}>
      <div />
      <div />
      <div />
    </StyledBurger>
  )
}
Burger.propTypes = {
    open: bool.isRequired,
    setOpen: func.isRequired,
  };

export default Burger;

Menu.js

import React from "react";
import { bool } from 'prop-types';
import { StyledMenu } from "./MenuStyles";

const Menu = ({ open }) => {
    return (
      <StyledMenu open={open}>
          CONTENT
      </StyledMenu>
    )
  }
  Menu.propTypes = {
    open: bool.isRequired,
  }
  export default Menu;

menu.js 的移动在样式组件中使用：

处理

transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(100%)'};

App.js

import React, { useState } from 'react';
import Header from "./components/Header/Header";
import Menu from "./components/Menu/Menu";

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
    <Menu open={open} setOpen={setOpen} />
    <Header open={open} setOpen={setOpen} />
    </>
  )
  }

export default App;

Header.js

import React, {useState} from 'react';
import Burger from '../Burger/Burger';


const Header = (open, setOpen) => (
        <div>
            <Burger open={open} setOpen={setOpen} />
        </div>
)

感谢任何帮助，谢谢！！

Answer 1

在Header.js中，道具没有被解构，所以open实际上是props对象。

// It should be this
const Header = ({ open, setOpen }) => (

// Not this
const Header = (open, setOpen) => (

React Hooks - 汉堡菜单

React Hooks - Hamburger Menu

javascript

reactjs

hamburger-menu

react-hooks

use-state