Passing Ref from Parent component in Child using Ref in React-CodePudding

I have a parent component and a child component. When I click on Button in the parent component (Box) - the child component (ContainedModal) is opening.

Issue: When Child component is opened - it should change the css (height and overflow) of parent component.

What I need: I need to move this logic into child component with using Ref. So I need to assign Ref to Parent () and get this Ref in child component. My parent component

CodePudding user response：

You can achieve this by putting the ref on the div you want in the ContainerModal component like this:

    const ContaineModal = ({modalRef}) => {
    return <div ref={modalRef}>

    </div>
}

<ContaineModal modalRef={reference}/>

CodePudding user response：

Hi I think you should take a look at Forwarding Ref https://reactjs.org/docs/forwarding-refs.html this is a way you can initiate a tag it the parents and pass to the child. a code example can be seen in the doc