reactjs - 隐藏显示组件并使用反应滚动突出显示链接

问题描述

问题陈述： 单击反应滚动链接时，该链接未突出显示（我使用过spy）并且它没有滚动到 div 而只是登陆到页面。

还有其他有效的方法吗？正如我正在学习做的反应

页面上下文组件：

export const PageContext = createContext({
    pageId: 'homepage',
    scrollToPage: () => {}
})

有一个主页组件

const Home = () => {

    const [pageId, setPageId] = useState('homepage');
    const anotherCompRef = React.useRef();
    const profileCompRef = React.useRef();

    const scrollToPage = (event) => {
        let pageId = event.target ? event.target.getAttribute('data-pageId') : null
        if (pageId) {
            setPageId(pageId);
            Scroll.scroller.scrollTo(pageId, {
                duration: 500,
                delay: 100,
                smooth: true,
                spy: true,
                exact: true,
                offset: -80,
            })
        }
    }

    const renderer = () => {
        switch (pageId) {
            case 'profile':
                return <ProfileView profileCompRef={profileCompRef}  />
            default:
                return <AnotherView anotherCompRef={anotherCompRef}/>
        }
    }

    return (
            <>
                <PageContext.Provider value={{pageId, scrollToPage: e => scrollToPage(e)}}>
                    <Layout>
                        {renderer()}
                    </Layout>
                </PageContext.Provider>
            </>
    )
}

布局组件：

const Layout = ( {children} ) => {

    return (
            <>
                <Header/>
                <MainContainer children={children}/>
                <Footer />
            </>
    )
}

export default Layout

配置文件视图组件：

const ProfileView = (props) => {

    return (
            <>
                <ProfileContainer id='profile' ref={props.profileCompRef} >
                    do stuff
                </ProfileContainer>
            </>
    )
}

export default ProfileView

另一个视图组件

const AnotherView = (props) => {

    return (
            <>
                <AnotherViewContainer id='anotherView' ref={props.anotherCompRef} >
                    do stuff
                </AnotherViewContainer>
            </>
    )
}

export default AnotherView

标题组件：

const Header = () => {

    const pageContext = useContext(PageContext)

    return (
            <>
                <NavbarContainer>
                    <NavbarMenu>
                        <NavItem>
                            <NavLink to='profile' data-pageId='profile' smooth={true} duration={500} spy={true} exact='true' offset={-80} onClick={(e) => pageContext.scrollToPage(e)}>
                                Profile
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink to='anotherView' data-pageId='anotherView' smooth={true} duration={500} spy={true} exact='true' offset={-80} onClick={(e) => pageContext.scrollToPage(e)}>
                                Another View
                            </NavLink>
                        </NavItem>
                    </NavbarMenu>
                </NavbarContainer>
            </>
    )
}

export default Header

标签： reactjsreact-hooksreact-contextreact-scroll

解决方案

我主要解决了以下提到的问题。

通过将页面高度设置为大于视口高度来启用浏览器滚动。只有这样滚动才能发生。
不适合给react-scroll链接添加点击事件。所以我开发了一个自定义链接。

在更新的过程中也做了一些修改pageId。

注意 -下面仅提及更新的文件。

页眉.js

import { useContext } from "react";
import PageContext from "./PageContext";

const Header = () => {
  const { pageId, setPageId } = useContext(PageContext);

  const scrollTo = (e) => {
    e.preventDefault();
    setPageId(e.target.dataset.pageid);
  };

  return (
    <>
      <div>
        <div>
          <div>
            <a
              href="#profile"
              data-pageid="profile"
              onClick={scrollTo}
              className={`${pageId === "profile" ? "active" : ""}`}
            >
              Profile
            </a>
          </div>
          <div>
            <a
              href="#anotherview"
              data-pageid="anotherview"
              onClick={scrollTo}
              className={`${pageId === "anotherview" ? "active" : ""}`}
            >
              Another View
            </a>
          </div>
        </div>
      </div>
    </>
  );
};

export default Header;

主页.js

import { useEffect, useRef, useState } from "react";
import { scroller } from "react-scroll";
import AnotherView from "./AnotherView";
import Layout from "./Layout";
import PageContext from "./PageContext";
import ProfileView from "./ProfileView";

const Home = () => {
  const [pageId, setPageId] = useState("homepage");
  const anotherCompRef = useRef();
  const profileCompRef = useRef();

  useEffect(() => {
    if (pageId !== "homepage")
      scroller.scrollTo(pageId, {
        duration: 500,
        delay: 100,
        smooth: true
      });
  }, [pageId]);

  const renderer = () => {
    switch (pageId) {
      case "profile":
        return <ProfileView profileCompRef={profileCompRef} />;
      default:
        return <AnotherView anotherCompRef={anotherCompRef} />;
    }
  };

  return (
    <>
      <PageContext.Provider value={{ pageId, setPageId }}>
        <Layout>{renderer()}</Layout>
      </PageContext.Provider>
    </>
  );
};

export default Home;

布局.js

import { useContext } from "react";
import Header from "./Header";
import PageContext from "./PageContext";

const Layout = ({ children }) => {
  const { pageId } = useContext(PageContext);

  return (
    <>
      <Header />
      <div id={pageId} children={children} />
    </>
  );
};

export default Layout;

样式.css

#root {
  height: calc(100vh + 100px);
}

a.active {
  color: red;
}

https://codesandbox.io/s/scrolling-with-react-scroll-68043895-bqt10?file=/src/Home.jsx

如果您需要进一步的支持，请告诉我。

reactjs - 隐藏显示组件并使用反应滚动突出显示链接

问题描述

解决方案

推荐阅读