Javascript 如何在React fullpage包装器中传递道具

我目前正在构建一个react应用程序，我想将

hamburgerToggle

道具向下传递到

PortfolioItem

组件，就像我使用

Nav

一样

问题是，当我尝试这样做时，我得到了

未定义的返回。我认为这与
ReactFullpage
和
ReactFullpage.Wrapper
组件有关。请参阅下面的代码。有人知道如何解决这个问题吗

import React, { useState } from 'react';
import ReactFullpage from '@fullpage/react-fullpage';
import SlideOne from './slides/slideOne/SlideOne';
import PortfolioItem from './slides/PortfolioItem/PortfolioItem';
import Nav from './slides/global/components/layout/Nav';


function Home() {
    const [current, setCurrent] = useState(false);

    const toggleMenu = () => {
        setCurrent(!current);
    }

    let hamburgerToggle = current ? 'is-active' : '';

    return (
        <>
            <Nav toggleMenu={toggleMenu} hamburgerToggle={hamburgerToggle} />
            <ReactFullpage
                // css3 = {true}
                // easingcss3 = 'ease-in'
                navigation = {true}
                navigationPosition = 'right'
                scrollingSpeed = {650}
                anchors = {['home', 'slide2', 'slide3']}
                render={({ state, fullpageApi}) => {
                return (
                        <ReactFullpage.Wrapper>
                            <div className="section bg-black" data-anchor="home">
                                <SlideOne fullpageMethod={fullpageApi} />
                            </div>
                            <div className="section bg-black" data-anchor="slide2">
                                <PortfolioItem color="red-500" fullpageMethod={fullpageApi} />
                            </div>
                            <div className="section bg-black" data-anchor="slide3">
                                <PortfolioItem color="blue-500" fullpageMethod={fullpageApi} />
                            </div>
                        </ReactFullpage.Wrapper>
                );
                }}
            />
        </>
    )
}
export default Home;

这似乎是一个完美的示例，因为您需要将数据传递给不同树级别上的多个组件

您的代码可能如下所示：

const ToggleContext = React.createContext(null);

function Home() {
   return (
      <ToggleContext.Provider value={toggleMenu, hamburgerToggle}>
        <Nav/>
        <ReactFullpage ... />  
      </ToggleContext.Provider>
   );
}

据我所知，你没有为道具汉堡游戏定义，但是为什么道具fullpageMethod可以工作呢？
const ToggleContext = React.createContext(null);

function Home() {
   return (
      <ToggleContext.Provider value={toggleMenu, hamburgerToggle}>
        <Nav/>
        <ReactFullpage ... />  
      </ToggleContext.Provider>
   );
}

function Nav(props) {
   const toggle = useContext(ToggleContext);
   // access toggle.toggleMenu and toggle.hamburgerToggle here
}