使用 React.fowardRef 滚动 onClick 无效

Question

我想知道如何使用 React refs 导航到特定组件

function App() {
  let CompetencesRef = React.createRef();
  let ExperiencesRef = React.createRef();
  let FormationRef = React.createRef();
  let RecoRef = React.createRef();
  let refs = { CompetencesRef, ExperiencesRef, FormationRef, RecoRef }
  let scrollToRef = (reference) => {
    console.log(reference)
    reference.current.scrollIntoView({ behavior: 'smooth' })
  }
  return (
    <ParallaxProvider>
      <ThemeProvider theme={theme}>
        <div className="App">

          <div className="hero">
            <HeaderApp refs={refs} scrollToRef={scrollToRef} />
            <ApprochApp />
          </div>
          <Apropos />
          <Competences ref={CompetencesRef} />
          <Experiences ref={ExperiencesRef} />
          <Formation ref={FormationRef} />
          <Recom ref={RecoRef} />
          <Contact />
          <Footer />

        </div >
      </ThemeProvider>
    </ParallaxProvider>
  );
}

export default App;

AppHeader

const AppHeader = (props, refs, scrollToRef) => {
    console.log(props)

    return (
        <div >
            <Headroom>
                <MenuApp refs={props.refs} scrollToRef={props.scrollToRef} />
            </Headroom>

        </div>

    )
}
export default AppHeader

AppMenu

const MenuApp = (props, refs, scrollToRef) => {
    console.log(props)
    return (
        <div className="menu sticky-inner grid-container">
            <div className="desktop-menu">
                <div className="menu-item a-propos" ref={props.refs.CompetencesRef} onClick={() => props.scrollToRef(props.refs.CompetencesRef)}>
                    <p className='button'>Compétences</p>
                </div>
                <div className="menu-item competences" ref={props.refs.ExperiencesRef} onClick={() => props.scrollToRef(props.refs.ExperiencesRef)} >
                    <p className='button'>Experiences </p>
                </div>
                <div className="menu-item experiences" ref={props.refs.FormationRef} onClick={() => props.scrollToRef(props.refs.FormationRef)}>
                    <p className='button'>Formation</p>
                </div>
                <div className="menu-item formation" ref={props.refs.RecoRef} onClick={() => props.scrollToRef(props.refs.RecoRef)}>
                    <p className='button'>Recomendations </p>
                </div>
            </div>
            <p className="mobile-menu">
                <MenuIcon />
            </p>
            <div className="github-ico">
                <GitHubIcon />
            </div>
            <div className="linkedin-ico">
                <LinkedInIcon />
            </div>
            <div className="contact">
                <div className='contact-btn'>
                    <span className="contact-ico"> <MessageIcon /></span>  <span style={isBrowser ? { display: 'block' } : { display: 'none' }} > contact </span>
                </div>
            </div>
        </div>
    )
}
export default React.forwardRef(MenuApp)

我在 Apps.js 和 scrollIntoView 中使用 ClickHandler。但实际上当我点击视图时并没有滚动。

我不会使用像react-scroll

这样的包

Answer 1

在你的 scrollToRef 函数中试试这个：

window.scrollTo(0, reference.current.offsetTop);

Answer 2

这是一个最小的可重现示例（没有所有代码噪音）：

function App() {
  const competencesRef = React.useRef();
  const refs = { competencesRef /* ExperiencesRef, FormationRef, RecoRef */ };
  const scrollToRef = (reference) => {
    reference.current.scrollIntoView({ behavior: "smooth" });
  };
  return (
    <>
      <AppHeader refs={refs} scrollToRef={scrollToRef} />
      <Competences ref={competencesRef} />
    </>
  );
}

const Competences = React.forwardRef((props, ref) => {
  return <div ref={ref}>...</div>;
});

const AppHeader = (props) => {
  return <MenuApp refs={props.refs} scrollToRef={props.scrollToRef} />;
};

const MenuApp = (props) => {
  return (
    <div
      ref={props.refs.competencesRef}
      onClick={() => props.scrollToRef(props.refs.competencesRef)}
    >
      <p className="button">Compétences</p>
    </div>
  );
};

您的代码的问题是您使用 React.createRef 而不是 React.useRef（您可以搜索不同之处），并且您只需要 React.forwardRef 用于使用 [= 的组件14=] 像 Competences.

这样的道具

Answer 3

你的代码有两个问题：

首先，函数组件使用ref和class组件是有区别的。在功能组件上使用 ref 会产生意想不到的结果，因为它们 don't have an instance.

您应该对所有部分组件使用 forwardRef，并确保将 ref 放在环绕元素上。

第二个问题是您对两个组件使用了引用。 Refs 应该只分配给单个组件（可能不是在所有情况下）。在这种情况下，您需要引用部分组件来获取 HTML 元素。

所以移除 AppMenu 组件中的 ref 道具：

<div className="menu-item a-propos" onClick={() => props.scrollToRef(props.refs.CompetencesRef)}>
  <p className='button'>Compétences</p>
</div>

虽然它可以与 refs 一起使用，但您可能正在考虑更简单的设置。例如。通过使用 id。

如果您确实想继续使用 refs，我还建议您不要将 refs 对象传递给子组件。您实际上不希望子组件“知道”树中更高的组件。

例如，您可以通过处理 App 组件中的 onClick 回调来缓解这种情况。

使用 React.fowardRef 滚动 onClick 无效

Scroll onClick using React.fowardRef is not working

javascript

reactjs

js-scrollintoview

react-ref