交流React <-> Angular Iframe

Question

I know people will say don't do this or why use both.. but I have to.

I need to pass data from React(child) to Angular (parent) to React(child) in an iframe.

So far I can use window.postMessage from React to angular with @HostListener , the issue is that (and I think) is that the window attribute is getting refreshed every time I use postMessage . Within React, there are components that use componentDidUpdate and this causes an entire refresh within react component once I click/select within react.

I can't do react to react because there are things that needs to be passed up to angular parent.

React side:

//some item is selected in react
onSelect = selected => {
    window.parent.postMessage(
      {
        activeData:tselected
      },
      '*'
    )
  }

sends to angular in iframe

@HostListener('window:message', ['$event'])
    onMessage(e) {
      this.selection = e['data'];
  }

output looks great but then the entire window gets refreshed to original blank state once it is selected.

Answer 1

I can see a lot of advantages of using Angular & ReactJS in one project. You can simple divide code, use Angular as a router & parent container, and implement React components on demand. It's very good idea. In old project you can in this way have a little innovation and use different technologies so you can develop new sills.

The easiest answer on your question how to pass data between angular & react is to use RxJS and subscription or Redux. In this way you can use one Redux store in few application, or pass one BehaviorSubject.

I'm not recommend you using events and post.messages for communication. It's unnecessary and you should support all kind of problems. Why if you have a ready solutions like RxJS or Redux?

If you use RxJS in ReactJS you can simply use comopnentDidMount() with subscription, like this:

  componentDidMount(): void {
    // In componentDidMount we subscribe heroes$ object
    this.props.heroes$.subscribe((res: IHero[]) => {
      // and we pass this data into React State object
      this.setState({heroes: res});
    });
  }

If you look for demo, you can get it from github where I create repo with minimal version of communication between Angular 7 app and React 16

If you need 2 separate React implementation it's not a problem to extend presented solutions. Look also hire: Connect Angular application with ReactJS app?