代码之家 › 专栏 › 技术社区 › infodev

React在点击链接时使用ref滚动到特定组件

react-forwardref react-ref reactjs javascript

0

infodev · 技术社区 · 5 年前

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

 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>
      );
    }

AppHeader

 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

0 回复 | 直到 5 年前

1

Kalhan.Toress 5 年前

我想你需要 forwarding-refs

在父母

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)

2

0

Mechanic 5 年前

需要两件事:a ref 和 scrollIntoView . 这个片段是组件之间共享引用的简化版本,有 redDiv 以及a button 在滚动到该div的标题中;我在顶部父元素中创建了ref,然后将其作为props传递给header和我想滚动到的组件;在标题中有一个调用的按钮 scrollIntoView 方法论 裁判 因此浏览器将滚动该元素进入视图;

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>