web-dev-qa-db-ja.com

React Component in Angular 2

反応コンポーネントのセットがあり、Angular 2アプリで使用しようとしています。

ここにメインReact私が使用しようとしているコンポーネントがあります

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

今私のangularプロジェクトには、次のファイルがあります。

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>

そしてmycardhost.component.ts

OnInitとAfterContentInitの両方を試しました。一度にアクティブにできるのは1つだけでした。最初はテンプレートに、「my-card」というIDのdivがありませんでした（これは

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

また、mycardhost.component.htmlのテンプレートファイルには、ID「my-card」のdivタグがあり、Reactコンポーネントがロードされます。

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

そして、アプリを実行すると、React StoreとReducerが初期化されます。ただし、次のエラーが発生します。渡したdocument.getElementById（）が有効なDOMではないことを示しています。素子。

Angularコンポーネントにブレークポイントを入れてみましたが、どれも実行されていません。何が間違っているのかわからないので、どうぞよろしくお願いします。

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
10
Sateesh Kommineni

最後に私は問題を解決することができます。

変更する必要があるのは、コンポーネントのインポート方法だけです。

下の行を変更しなければなりませんでした

「my-components-react」からMyCardをインポートします。

に

「my-components-react/es/MyCard」からMyCardをインポートします。

ありがとう

2
Sateesh Kommineni