Блог

Поэтому я хочу передать ссылку на навигационную панель в качестве реквизита для страницы. Но я не знаю, как его передать, я перенес свой проект из cra в следующий, я в основном новичок, пожалуйста, если есть лучший способ сделать это, пожалуйста, скажите мне. Спасибо!.

Вот мой код компонента navbar

 import React, { Fragment, useState, useEffect, useRef } from "react";
import Link from "next/link";

const NavBar = ({ navBarRefProps }) => {
    
    const navBarRef = useRef();

    useEffect(() => {
    
        navBarRefProps(navBarRef.current);      

    },[navBarRef])

    return(
        <Fragment>
            <nav ref={navBarRef}>
                <ul>
                    <li>
                        <Link href="/">
                            <a>Home</a>
                        </Link>
                    </li>
                </ul>
            </nav>
        </Fragment>
    )

}

export default NavBar;
 

Вот мой компонент макета.

 import React, { Fragment, useState, useEffect, useRef } from "react";
import { useRouter } from 'next/router';
import NavBar from "./../NavBar";
import MidNavBar from "./../MidNavBar";
import Banner from "./../Banner";

const Layout = ({ children, navBarRefProps }) => {

    const navBarRef = useRef();

    const router = useRouter();

    const navBarRefPropsHandle = (props) => {
        navBarRef.current = props.current;
        navBarRefProps(navBarRef.current);
    }

    return(
        <Fragment>
            <div className="wrapper">
                <NavBar navBarRefProps={ navBarRefPropsHandle } />
                <div className="inner_wrapper">
                    <Banner/>
                    {
                        router.pathname !== "/" ?
                            <MidNavBar midNavBarRefProps = {midNavBarRefPropsHandle} dummyRefProps={dummyRefPropsHandle}/>
                        :
                        ""
                    }
                    { children }
                </div>
            </div>
        </Fragment>
    )

}
 

Here is my _app.js file

 import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React , { useState, useRef, useEffect } from "react";
import Layout from "./../components/Layout";
import './../styles/css/index.css';

function MyApp({ Component, pageProps }) {

    const navBarRef = useRef();

    const setNavBarRefHandle = (props) => {
        navBarRef.current = props;
    }

    return(
        <Layout navBarRefProps={ setNavBarRefHandle }>
            <Component {...pageProps} navBarRefProps={ navBarRef.current } />
        </Layout>
    )
}

export default MyApp;
 

Here is my home page or index.js file, where I want to use the navbar ref

 import React, { Fragment, useEffect, useRef } from "react";
import ImageSlider from "./../components/ImageSlider ";
import About from "./../components/About";
import MidNavBar from "./../components/MidNavBar";

// I thought I could access the navBarRefProps if I passed it on the <Component> in _app.js but it's undefined
const Home = ({ navBarRefProps }) => {

    const navBarRef = useRef();
    const midNavBarRef = useRef();

    useEffect(() => {
        navBarRef.current = navBarRefProps;
    },[navBarRefProps])

    const stickMidNavBarHandle = () => {
        console.log(navBarRef.current);
        let navBarRefSize = navBarRef.offsetHeight;
    }

    useEffect(() => {
        window.addEventListener("scroll",stickMidNavBarHandle );

        return () => {
            window.removeEventListener("scroll",stickMidNavBarHandle);
        }
    },[])
    
    const midNavBarRefPropsHandle = (props) => {
        midNavBarRef.current = props.current;
    }

    return(
        <Fragment>
            <ImageSlider/>
            <MidNavBar midNavBarRefProps = {midNavBarRefPropsHandle}/>
            <About />
        </Fragment>  
    )
}

export default Home;
 

Это моя файловая структура

 root folder
    .next
    components
        NavBar
            -index.js
        Layout
            -index.js
        MidNavBar
            -index.js
    pages
        _app.js
        index.js
        about.js
        about
            -missionVision.js
    public
        images
        videos
        fonts
    styles
 

Спасибо!