0

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

 function App() {
      const CompetencesRef = React.useRef();
      const ExperiencesRef = React.useRef();
      const FormationRef = React.useRef();
      const RecoRef = React.useRef();
    
    
      return (
        <ParallaxProvider>
          <ThemeProvider theme={theme}>
            <div className="App">
    
              <div className="hero">
                <HeaderApp />
                <ApprochApp />
              </div>
              <Apropos />
              <Competences parentRef={CompetencesRef} />
              <Experiences parentRef={ExperiencesRef} />
              <Formation parentRef={FormationRef} />
              <Recom parentRef={RecoRef} />
              <Contact />
              <Footer />
    
            </div >
          </ThemeProvider>
        </ParallaxProvider>
      );
    }

应用标头

 const AppHeader = () => {
        return (
            <div >
                <Headroom>
                    <MenuApp />
                </Headroom>
    
            </div>
        )
}


   export default AppHeader

应用菜单

   const MenuApp = () => {
        return (
            <div className="menu sticky-inner grid-container">
                <div className="desktop-menu">
                    <div className="menu-item a-propos">
                        <p className='button'>Me découvrir</p>
                    </div>
                    <div className="menu-item competences">
                        <p className='button'>Compétences </p>
                    </div>
                    <div className="menu-item experiences">
                        <p className='button'>Experiences</p>
                    </div>
                    <div className="menu-item formation">
                        <p className='button'>Formation </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 MenuApp

我知道我应该在父组件上声明 ref ，但我一直坚持如何将引用传递给菜单应用程序并在它和组件之间建立链接。

实际上，我不会使用像react-scroll这样的包

4

2 回答 2

0

我认为您需要转发参考

在父母

const RecoRef = React.useRef();
....
<ChildComponent ref={RecoRef} />

在子组件中

//export the component with React.forwardRefs

const ChildComponent = (props, ref) => {
    return (
        <div ref={ref}>
        .....
        </div>
    )
}

export default React.forwardRefs(ChildComponent)
于 2020-10-08T12:49:13.830 回答
0

需要两件事： aref和scrollIntoView。此片段是在组件之间共享 ref 的简化版本，在标题中有redDiv和 abutton滚动到该 div 中；我在顶部父元素中创建了 ref，然后将它作为道具传递给标题和我想要滚动到的组件；在标题中有一个按钮，可以调用该scrollIntoView方法，ref因此浏览器会将该元素滚动到视图中；

const AppHeader = (props) => {
    return (
        <div className="menu sticky-inner grid-container">
            my logo
            <button onClick={()=> props.iconMenuRefs[0].current.scrollIntoView({behavior: "smooth"})}
            > scroll to red div </button>
            <button onClick={()=> props.iconMenuRefs[1].current.scrollIntoView({behavior: "smooth"})}
            > scroll to blue div </button>
        </div>
    )
}

function App() {
  const redDivRef = React.useRef();
  const blueDivRef = React.useRef();
  return (
    <div>
      <AppHeader iconMenuRefs={[redDivRef, blueDivRef]}/>
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <SimpleComp ref={redDivRef} color="red"/>
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <SimpleComp ref={blueDivRef} color="blue"/>
    </div>
  );
}

const SimpleComp = React.forwardRef((props, ref) => {
  return <div style={{backgroundColor: props.color}} ref={ref}>scroll to me!</div>
})

ReactDOM.render( <App />, myApp )
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.0/umd/react-dom.production.min.js"></script>
<div id="myApp"></div>

于 2020-10-08T13:07:42.057 回答