在Angular 2+；_Angular_Reactjs_React Redux

在Angular 2+；

angular reactjs

在Angular 2+；,angular,reactjs,react-redux,Angular,Reactjs,React Redux,我正在使用Angular 2+创建一个网站，但我也希望使用某些React组件库。这真的不应该那么难；然而，问题是这些组件需要一个在根级别具有Redux存储的应用程序才能工作。基本上，文档树应该如下所示： <body> ... <Provider store={store}> <span> <app-contents></app-contents> <TopLevelComponent/&

我正在使用Angular 2+创建一个网站，但我也希望使用某些React组件库。这真的不应该那么难；然而，问题是这些组件需要一个在根级别具有Redux存储的应用程序才能工作。基本上，文档树应该如下所示：

<body>
  ...
  <Provider store={store}>
    <span>
       <app-contents></app-contents>
       <TopLevelComponent/>
    </span>
  </Provider>
  ...
</body>

及

在我看来，原因可能是@ngui/react已经过时，所以我尝试在代码中动态创建提供者：

  constructor(@Inject(TheStore) private theStore: Redux.Store<any>,
              private elementRef: ElementRef) {}

  ngAfterViewInit() {
    const contents = React.createElement('app-contents', {key: this.randomKey}, null);
    const provider = React.createElement(Provider, {store: this.theStore, key: this.randomKey}, contents);
    ReactDOM.render(provider, this.elementRef.nativeElement, () => {});
  }

  get randomKey() { /* returns a pseudorandom string */ }

…它呈现组件，但会将节点弹出到更高级别，其中的React组件再次抱怨无法访问存储：

<app-provider _ngcontent-c0="" _nghost-c1=""></app-provider>
<app-content _nghost-c2="" ng-version="4.4.4">
  content works!
  <!-- react component missing the store -->
</app-content>


内容有效！

所以，现在我想知道，是否真的有可能从角度上下文切换到角度上下文，反应提供者，到角度上下文，反应组件，使其工作？或者我必须去掉React库，以Angular的形式生成组件

ERROR Error: React.Children.only expected to receive a single React element child.

  constructor(@Inject(TheStore) private theStore: Redux.Store<any>,
              private elementRef: ElementRef) {}

  ngAfterViewInit() {
    const contents = React.createElement('app-contents', {key: this.randomKey}, null);
    const provider = React.createElement(Provider, {store: this.theStore, key: this.randomKey}, contents);
    ReactDOM.render(provider, this.elementRef.nativeElement, () => {});
  }

  get randomKey() { /* returns a pseudorandom string */ }

<app-provider _ngcontent-c0="" _nghost-c1="">
   <app-contents></app-contents>
</app-provider>

const factory = this.factoryResolver.resolveComponentFactory(ProviderContentComponent);
const node = this.viewContainerRef.element.nativeElement.lastChild;
const component = factory.create(this.viewContainerRef.parentInjector, [], node);
this.viewContainerRef.insert(component.hostView);

<app-provider _ngcontent-c0="" _nghost-c1=""></app-provider>
<app-content _nghost-c2="" ng-version="4.4.4">
  content works!
  <!-- react component missing the store -->
</app-content>