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

问题描述

我目前正在构建一个 React 应用程序，我想将 hamburgerToggle 属性传递给 PortfolioItem 组件，就像我对 Nav 所做的一样。

问题是，当我尝试这样做时，我得到了 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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）