reactjs 如何使用React滚动到元素

2uluyalo 于 2023-02-22 发布在 React

关注(0)|答案(2)|浏览(122)

我觉得自己很愚蠢，因为我做了整个网站，但我坚持试图使导航链接滚动在同一页面的组件。
我的应用程序. js

import Header from './components/Header';
import Intro from './components/Intro';
import Experience from './components/Experience';
import Skills from './components/Skills';
import Projects from './components/Projects';
import Arts from './components/Arts';
import Graduation from './components/Graduation';
import Footer from './components/Footer';

import styled from 'styled-components';

const AppContainer = styled.div`
    width: 100%;
`;

function App() {
  return (
    <AppContainer>
      <Header />
      <Intro />
      <Experience />
      <Skills />
      <Projects />
      <Arts />
      <Graduation />
      <Footer />
    </AppContainer>
  )
}

export default App;

我的标题

function HeaderMenu() {
    return (
        <ul>
            <li><a href='#projects'>Projects</a></li>
            <li><a href='#skills'>Skills</a></li>
            <li><a href='#contact'>Contact</a></li>
        </ul>
    )
};

export default HeaderMenu;

我已经尝试过，但没有工作：使用标签（如html-css），“react-scroll”，useRef。

reactjs

来源：https://stackoverflow.com/questions/75514350/how-to-scroll-to-an-element-with-react

2条答案

按热度按时间

kadbb4591#

你可以试试overflow-x: scroll;
文档：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

赞(0）回复(0）举报 2023-02-22

swvgeqrz2#

问题解决了。
我需要安装这个：

npm install --save react-router-hash-link

附录J中

import { BrowserRouter } from 'react-router-dom';

    function App() {
  return (
    <BrowserRouter>
      <Header />
      <Intro />
      <Experience />
      <Skills />
      <Projects />
      <Arts />
      <Graduation />
      <Footer />
    </BrowserRouter>
  )
}

我在我想使用的每个组件上放了一个id。

<ExperienceContainer id="experience">
<ProjectsContainer id="projects">

在标头上

import { HashLink as Link } from 'react-router-hash-link';

const StyledLink = styled(Link)`
    text-decoration: none;
    color: #000000;
`

function Header() {
    return (
        <ul>
            <li><StyledLink to="#experience">Experience</StyledLink></li>
            <li><StyledLink to="#projects">Projects</StyledLink></li>
        </ul>
    )
};

export default Header;

希望对新来的人有帮助。

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 如何使用React滚动到元素

2条答案

相关问题

热门标签

最新问答