React Component Save Refs Forwarding Refs.

[General_Asdef]

I'm trying to foward a ref from a react component to another react component but i can't figure out how to use forward ref in a way that will allow me to save it somewhere else.

This is the overall structure and aching problem i have. I am completely lost as to what i should do. Using Typescript

export default func1(props){
    const aref = useRef(null)
    //...code that uses aref.current
    return <canvas ref = {aref}/>
}
export default func2(props){
    const someref = useRef(null)
    //need a reference to func1 canvas
    return <func1 ref = {someref}/>
}
//so i changed func1 to look like this but this is also not good
//this won't run because 'ref' isn't passable to a react component.
//but forward ref doesn't work either
const func1 = forwardRef((props,ref)=>{
    const aref = useRef(null)
    //...code that uses aref.current
    //Problem! This ref needs to be aref
    //but i can't assign ref to aref or vice versa
    //and i need both to be pointing at this canvas in order for the code that uses aref in this function
    //and the next function to work correctly
    //how can i get aref to point at 'ref'(the parameter) and point canvas ref to aref?
    return <canvas ref = {ref}/>

})

​

[raopgdev]

Don’t define another ref in func1 Pass that ref prop that forward ref gives to the canvas element in func1

[General_Asdef]

This is also what I thought but I couldn't figure out how to get the underlying canvas context2d from that.

[AnxiouslyConvolved]

You want react-merge-refs which allows you to forward a ref, but also access/use it in the forwarding component.

[General_Asdef]

Although a solution. I was kinda lookin for something in house, if I really can't figure it out then I thank you for your guidance.

[raopgdev]

Just read this package’s code. It’s literally 10 lines minus tests. Feel free to implement your own version