Javascript 单击链接时，使用ref滚动到特定组件

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

//export the component with React.forwardRefs

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

export default React.forwardRefs(ChildComponent)

函数应用程序（）{
const competincesref=React.useRef（）；
const ExperiencesRef=React.useRef（）；
const FormationRef=React.useRef（）；
const RecoRef=React.useRef（）；
返回(
我想你需要

在父母中

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

const RecoRef=React.useRef（）；
....

在子组件中

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

//export the component with React.forwardRefs

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

export default React.forwardRefs(ChildComponent)

//使用React.forwardRefs导出组件
常量ChildComponent=（道具，参考）=>{
返回(
.....
)
}
导出默认的React.forwardRefs（ChildComponent）
需要两样东西：a
ref
和。
这个snippent是在组件之间共享ref的简化版本，标题中有
redDiv
和一个
按钮
，可以滚动到该div；我在顶部的父元素中创建了ref，然后将其作为道具传递给标题和我想要滚动到的组件；标题中有一个按钮，可以调用
scrollIntoView
方法，从而浏览器将该元素滚动到视图中


const-AppHeader=（道具）=>{
返回(
我的标志
props.iconMenuRefs[0]。current.scrollIntoView（{behavior:“smooth”}）
>滚动到红色div
props.iconMenuRefs[1]。current.scrollIntoView（{behavior:“smooth”}）
>滚动到蓝色div
)
}
函数App（）{
const redDivRef=React.useRef（）；
const blueDivRef=React.useRef（）；
返回(












































































































































);
}
const SimpleComp=React.forwardRef（（props，ref）=>{
把卷轴还给我！
})
ReactDOM.render（，myApp）

您的示例不包括click事件将click处理程序从父组件传递给子组件，并且当click发生在子组件内部时，它将根据单击的项目在父组件内部调用click处理程序，并滚动到ref