web-dev-qa-db-fra.com

Utilisation du composant React dans Angular 2

J'ai un ensemble de composants de réaction et j'essaie de les utiliser dans une application Angular 2. 

Voici le composant principal de réaction que j'essaie d'utiliser

import React, {Component} from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import MyCardContainer from './containers/MyCardContainer';
import './assets/style/main.css';
export default class MyCard extends Component {

    constructor(props){
        super(props);
    }

    componentWillMount(){

    }

    render(){
        if(this.props.param1 && this.props.param2) {
            return (
                <Provider store={configureStore()}>
                    <MyCardContainer param1={this.props.param1} param2={this.props.param2} key='container'/>
                </Provider>
            )
        }
        else{
            return(
                <div>
                    Invalid Params are provided for MyCard Component !!
                </div>
            )
        }
    }
}

Maintenant, dans mon projet angulaire, j'ai les fichiers suivants.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { MyCardHostComponent } from './mycardhost.component';

@NgModule({
  declarations: [
    AppComponent,
    MyCardHostComponent
  ],
  imports: [
      BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to React Components Usage Page
  </h1>
  <div>
    <my-card-Host></my-card-Host>
  </div>
  <div id="my-card"></div>
</div>

Et mycardhost.component.ts

J'ai essayé à la fois OnInit et AfterContentInit. Je n'avais qu'un seul actif à la fois. Initialement dans le modèle, je n'avais pas la div avec l'identifiant "ma-carte" (que j'ai dans 

import {Component, ViewChild,ElementRef,AfterContentInit} from '@angular/core';
import {MyCard} from './MyCard';
@Component({
  selector: 'my-card-Host',
  templateUrl:"./mycardhost.component.html"
})

export class MyCardHostComponent implements OnInit, AfterContentInit{

    @ViewChild('my-card') myCard: ElementRef;

    ngOnInit(){
       // MyCard.initialize("param1val","param2val",document.getElementById("my-card"));
    }

    ngAfterContentInit(){
      MyCard.initialize("param1val","param2val",this.myCard.nativeElement);
    }
}

et le fichier modèle pour mycardhost.component.html qui contient la balise div avec l'identifiant "my-card" où le composant React sera chargé.

<div id="my-card"></div>

Et quand je lance l'application, le React Store et les réducteurs sont initialisés. Cependant, je reçois toujours l'erreur suivante: ce qui indique que le document.getElementById () que je passe n'est pas un élément DOM valide.

J'ai essayé de mettre des points d'arrêt dans les composants Angular et aucun d'entre eux n'est en cours d'exécution. Pas sûr de ce que je fais mal. Vraiment apprécier toute aide.

Uncaught ZoneAwareError {__zone_symbol__error: Error: _registerComponent(...): Target container is not a DOM element.
    at invariant (eval at <an…, …}

   Target container is not a DOM element. at invariant (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:39:15) [<root>] at Object._registerComponent (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:447:200) [<root>] at Object._renderNewRootComponent (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:470:34) [<root>] at Object.wrapper [as _renderNewRootComponent] (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:66:21) [<root>] at Object._renderSubtreeIntoContainer (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:550:32) [<root>] at render (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:570:23) [<root>] at wrapper (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:66:21) [<root>] at eval (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:54:22) [<root>] at Object.eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:607:2) [<root>] at __webpack_require__ (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:557:30) [<root>] at fn (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:88:20) [<root>] at Object.eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:588:19) [<root>] at __webpack_require__ (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:557:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:580:37) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:583:10) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:1873:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:732:1), <anonymous>:8:27) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:732:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:760:1), <anonymous>:7:17) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:760:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:746:1), <anonymous>:13:31) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:746:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:712:1), <anonymous>:5:20) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:712:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:1880:18) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at webpackJsonpCallback (http://localhost:8080/js/polyfills.js:24:23) [<root>] at http://localhost:8080/js/app.js:1:1 [<root>]
__zone_symbol__name
:
"Invariant Violation"

angularreactjsangular-library
8
Sateesh Kommineni

Enfin, je suis capable de résoudre le problème.

Tout ce dont j'avais besoin pour changer était la manière dont j'importais le Composant.

je devais changer la ligne ci-dessous

importer MyCard à partir de 'my-components-react';

à

importer MyCard à partir de 'my-components-react/es/MyCard';

Merci

2
Sateesh Kommineni