React pass ref throw functional components in different levels

Question

I would like to scroll to menu element in a page.

I have the menu component which is not a parent of components to which I would like to scroll.

I have found this post that describe a similar problem

Passing ref to a child We want the ref to be attached to a dom element, not to a react component. So when passing it to a child

component we can't name the prop ref.
    const myRef = useRef(null)
    return <ChildComp refProp={myRef}></ChildComp> }  ```

Then attach the ref prop to a dom element. ```jsx const ChildComp =
(props) => {
    return <div ref={props.refProp} /> } ```

Here's my app structure

Menu component:

const MenuApp = () => {
    return (
        <div>
            <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>
        </div>
    )
}

The parent is app component

 <div className="App">
  <div className="hero">
    <HeaderApp />
    <ApprochApp />
  </div>
  <Apropos />
  <Competences />
  <Experiences />
  <Formation />
  <Recom />
  <Contact />
  <Footer />
 </div >

I would like that mu menus scrolls to the react components in the main App component

So how can I passe the reference from the menu component to the app and use it in components to scroll ?

Have you looked at [forwarding refs](https://reactjs.org/docs/forwarding-refs.html)? — ray, Aug 10 '20 at 23:01

score 0 · Answer 1 · answered Aug 10 '20 at 23:20

0

I do not understand your problem completely though. However, one thing I can see from your question is that you're not forwarding the ref properly.

What you need in this case is forwardRef.

Basically, what you need to do is to create the childComponent as something like this:

const childComponent = React.forwardRef(({...otherProps}, ref) => {
  return (<><div ref={ref}>Component content </div></>)
})

Where you need to use the component all you need to do is this:

const parentComponent = () => {
  const reveiwsRef = React.useRef("");
  return (
   <div> 
      <childComponent ref={reviewsRef} />
   </div>
  );
}

You can find more info about this on the react documentation: Forwarding-Refs

I have hope this helps though

answered Aug 10 '20 at 23:20

Tolumide

944
9
11

what I would like to do is the scroll throw a page when clicking a menu element. The menu component is not a child neither a parent of elements component to scroll to – infodev Aug 10 '20 at 23:31
Ohhhhh, you want to conditionally render a component when a button/menu item is clicked? Please confirm if this is the case – Tolumide Aug 10 '20 at 23:36
I want to scroll to an element of a page when click on an element of an horizontal menu elements , like a one page portfolio menu " about me , skills , work " then automatically scroll when click on menu elemy – infodev Aug 10 '20 at 23:58
wow, really, Have you tried to use anchor tags for this? Identify the target with an id, and then place an anchor tag with the href having a key of the intended `id` as the value. something like this: https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html – Tolumide Aug 11 '20 at 00:15

React pass ref throw functional components in different levels

Passing ref to a child We want the ref to be attached to a dom element, not to a react component. So when passing it to a child

1 Answers1