使用React.fowardRef滚动onClick不起作用

如何解决使用React.fowardRef滚动onClick不起作用

我想知道如何使用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,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

这样的软件包

解决方法

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

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来使用{{1} } ref之类的道具。

,

您的代码中有两个问题：

首先，对功能组件和类组件使用Competences有所不同。在功能组件上使用ref会产生意外结果，因为它们don't have an instance。

您应该将ref用于所有节组件，并确保将forwardRef放在包装元素上。

第二个问题是您将引用用于两个组件。引用仅应分配给单个组件（可能并非在所有情况下）。在这种情况下，您需要引用这些部分的组件以保留HTML元素。

因此，请删除AppMenu组件中的ref道具：

ref

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

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

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

,

在您的scrollToRef函数中尝试以下操作：

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