如何在 React fullpage wrapper 中传递一个 prop

Question

我目前正在构建一个 React 应用程序，我想将 hamburgerToggle 道具传递给 PortfolioItem 组件，就像我对 Nav.[=19= 所做的那样]

问题是，当我尝试这样做时，我得到 undefined 返回。我认为这与 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;

编辑：我的 Nav 组件中的代码：

import React from 'react';
import Hamburger from '../Hamburger';

function Nav(props) {
    return (
        <>
            <div className="bg-black md:bg-transparent z-50 border-r border-brokenblack-rowan w-full md:w-nav absolute left-0 h-14 md:h-full flex items-center pl-5 md:pl-0 md:justify-center">
                <Hamburger toggleMenu={props.toggleMenu} hamburgerToggle={props.hamburgerToggle} hamburger="arrowturn" />
            </div>
            <div className={`bg-black h-full w-0 z-40 absolute left-0 ${props.hamburgerToggle}`}>

            </div>
        </>
    )
}

export default Nav;

Answer 1

这似乎是 useContext() hook 的完美示例，因为您需要将数据传递到不同树级别的多个组件。

您的代码可能如下所示：

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
}

如何在 React fullpage wrapper 中传递一个 prop

How to pass a prop down in React fullpage wrapper

javascript

reactjs

fullpage.js