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;

constChild = forwardRef((props, ref) => {
  constcomputeDataUrl = (value) => {
    return`data:text/html,${encodeURI(value)}`
  }

  const [data, setData] = useState(computeDataUrl('Init'))
    
  constonMessage = ({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<iframeref={ref}src={data}width="400"height="300"sandbox="allow-same-origin allow-scripts"></iframe>
})

constParent = () => {
  const ref = useRef();
  
  useEffect(() => {
    
    const iFrameElement = ref && ref.current;
    
    if(iFrameElement) {
      const postMessage = iFrameElement.contentWindow.postMessage;
      postMessage("Message from parent"); 
    }
  
  }, [ref])

  return<Childref={ref}></Child>
}

ReactDOM.render(
    <Parent />,
    document.getElementById('root')
  );

<scriptsrc="https://unpkg.com/react/umd/react.development.js"></script><scriptsrc="https://unpkg.com/react-dom/umd/react-dom.development.js"></script><scriptsrc="https://unpkg.com/babel-standalone@6/babel.min.js"></script><divid="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 (
        <GrandChildComponentref={(instance) => {this.grandchild = instance}}
        />
    );
}

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

var grandchild = this.child.grandchild;