Passing a Ref from a Child to a Parent in React with Class Component

Question

I have an iFrame in a child component, and want to pass a ref of the iframe to the parent component so I can do a postMessage to the iframe. I am unsure how to implement forwarding refs from child to parent.

Thanks!

Answer 1

Here's an example how can you do it

 const { forwardRef, useRef, useState, useEffect } = React; const Child = forwardRef((props, ref) => { const computeDataUrl = (value) => { return `data:text/html,${encodeURI(value)}` } const [data, setData] = useState(computeDataUrl('Init')) const onMessage = ({data, origin}) => { setData(computeDataUrl(data)); } useEffect(() => { const iFrameElement = ref && ref.current; if(iFrameElement) { const iFrameWindow = iFrameElement.contentWindow; iFrameWindow.addEventListener("message", onMessage, false); } return () => { iFrameWindow.removeEventListener("message", onMessage); } }, []) return <iframe ref={ref} src={data} width="400" height="300" sandbox="allow-same-origin allow-scripts"> </iframe> }) const Parent = () => { const ref = useRef(); useEffect(() => { const iFrameElement = ref && ref.current; if(iFrameElement) { const postMessage = iFrameElement.contentWindow.postMessage; postMessage("Message from parent"); } }, [ref]) return <Child ref={ref}></Child> } ReactDOM.render( <Parent />, document.getElementById('root') );

 <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <div id="root"></div>

Answer 2

If you want your child reference, that's easy ...

<ChildComponent
    ref={(instance) => {this.child = instance}}
/>

Then you can call child functions in your parent like this.child.childFunction() .

If you want to get your child's child reference , just continue this pattern.

Your child class: Set your grandchild in your render() .

render() {
    return (
        <GrandChildComponent
            ref={(instance) => {this.grandchild = instance}}
        />
    );
}

Your parent class: Call the child component's reference's grandchild key.

var grandchild = this.child.grandchild;