3

我正在使用'react-burger-menu' https://github.com/negomi/react-burger-menu 在useContext钩子的帮助下，我想要另一个按钮来关闭/打开我已经实现的侧边菜单。我的问题是我在他们的文档之后收到以下错误

对象作为 React 子对象无效（找到：带有键 {isMenuOpen、toggleMenu、stateChangeHandler} 的对象）。如果您打算渲染一组子项，请改用数组。

Cart.js（这是实现“汉堡菜单”的地方）

import React,  {useContext} from 'react'
import {MyContext} from './MyContext'
import { slide as Menu } from 'react-burger-menu'
import './Cart.css'

export default function Cart() {
  const ctx = useContext(MyContext);
  return (
    <div>
      <Menu
        right
        width={350}
        isOpen={false}
        onStateChange={state => ctx.stateChangeHandler(state)}
        customBurgerIcon={
          <i className="fa fa-shopping-cart" aria-hidden="true" />
        }
        burgerButtonClassName={"cartButton"}
      >
        <h1>Your Cart</h1>
        <button onClick={ctx.toggleMenu}>Toggle menu</button>
      </Menu>
    </div>
  );
}

MyContext.js这是代码中断的地方。我已经尝试删除一些代码并只是发送字符串值以确保它有效并且确实有效，但是一旦我开始使用它拒绝编译的函数。

import React, {createContext, useState} from 'react'
export const MyContext = createContext();
export const MyProvider = props => {
  const [menuOpenState, setMenuOpenState] = useState(false);
  return (
    <MyContext.Provider
      value={{
        isMenuOpen: menuOpenState,
        toggleMenu: () => setMenuOpenState(!menuOpenState),
        stateChangeHandler: newState => setMenuOpenState(newState.isOpen)
      }}
    >
      {props.children}
    </MyContext.Provider>
  );
};

Navigation.js这就是我包装提供程序的方式。这应该没问题。

<MyProvider>
  <Cart />
</MyProvider>

我一直在关注“burger-menu”的官方文档，了解如何在这里使用钩子实现这一点，但我似乎无法弄清楚这个问题。任何建议将不胜感激。

4

0 回答 0