Passing A Ref From A Child To A Parent In React With Class Component

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

Solution 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>

Solution 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;