Question

我知道人们会说不要这样做，或者为什么要同时使用这两种方法。但是我必须这样做。

我需要在iframe中将数据从React（child）传递到Angular（父级），再传递到React（child）。

到目前为止，我可以使用window.postMessage从React到@HostListener一起使用角度，问题是（我认为）是每次我使用postMessage时，窗口属性都会刷新。在React中，有使用componentDidUpdate的组件，一旦我在react中单击/选择，就会在react组件中引起整个刷新。

我无法做出反应，因为有些事情需要传递给有角的父母。

反应面：

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

在iframe中发送为有角度的

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

输出看起来不错，但是一旦选中它，整个窗口就会刷新为原始空白状态。

Answer 1

我可以看到在一个项目中使用Angular和ReactJS的许多优点。您可以简单地划分代码，将Angular用作路由器和父容器，并按需实现React组件。这是个好主意。在旧项目中，您可以通过这种方式进行一些创新，并使用不同的技术，以便开发新的窗台。

关于如何在angular和react之间传递数据的问题的最简单答案是使用RxJS和subscription或Redux。这样，您可以在少数几个应用程序中使用一个Redux存储，或传递一个BehaviorSubject。

我不建议您使用events和post.messages进行通信。这是不必要的，您应该支持所有类型的问题。为什么要准备好RxJS或Redux之类的解决方案？

如果您在ReactJS中使用RxJS，则可以使用comopnentDidMount()进行订阅，如下所示：

  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});
    });
  }

如果您需要演示，可以从github那里获得，我在这里创建了回购协议，使Angular 7应用程序和React 16之间的通讯版本降至最低。

如果您需要2个独立的React实现，则扩展现有解决方案不是问题。还要看一下租金：Connect Angular application with ReactJS app?

交流React <-> Angular Iframe

1 个答案: