在Angular 2中使用React，错误类型错误：无法读取未定义的属性渲染

Question

我试图包括一个库写的反应到我的角2应用程序，但ReactDOM似乎保持未定义的类型脚本无论我尝试，即使变量的内容在chrome的javascript检查器错误）

为了解决这个问题，我研究了将这两者结合起来的其他尝试，但只找到了Angular 2 Beta和React版本的解决方案

我的fork可以在这里找到：github.com/aJonathanSchneider/Angular-2-React-Example-fork，启动它的命令如下

npm install
npm start

ReactDOM的类型如下所示：

/// <reference path="../../node_modules/@types/react/index.d.ts" />
/// <reference path="../../node_modules/@types/react-dom/index.d.ts" />
import ReactDOM = __React.__DOM;

export default ReactDOM;

应包括反应组件的角度组件如下所示：

import React from "./react";
import ReactDOM from "./react-dom";
import {Component} from '@angular/core';

@Component({
    selector: 'react-component',
    template:
        '<div [id]="id">wrapper</div>'
    ,
    inputs: ['component', 'props']
})
export class ReactComponent {
    component: any;
    props: Object;
    id: number;
    drawNode: any;
    ngOnInit() {
        this.id = Math.floor(Math.random() * 9999999);
    }
    ngAfterViewInit() {
        this.drawNode = document.getElementById(this.id.toString());
        this.render();
    }
    ngOnChanges() {
        if (this.drawNode) {
            this.render();
        }
    }
    render() {
        ReactDOM.render(React.createElement(this.component, this.props), this.drawNode);
    }
}

这是my index.html中脚本的顺序：

 <script src="node_modules/es6-shim/es6-shim.min.js"></script>
 <script src="node_modules/reflect-metadata/Reflect.js"></script>

 <script src="node_modules/react/dist/react.min.js"></script>
 <script src="node_modules/react-dom/dist/react-dom.min.js"></script>
 <script src="node_modules/systemjs/dist/system.src.js"></script>
 <script src="node_modules/rxjs/bundles/Rx.js"></script>
 <script src="node_modules/zone.js/dist/zone.js"></script>
 <script>var __React = React;</script>
 <script src="systemjs.config.js"></script> 
 <script>
      System.import('app/main.js').catch(function(err){ console.error(err); });
 </script> 

非常感谢提前！

Answer 1

虽然可以结合Angular 2和React，但这被认为是一种糟糕的技术方法。尽管Angular是一个模块化框架，但尝试使用React替换UI模块将导致更多错误。原因是React和Angular在创建用户界面时有时采用非常不同的方法，使用不同的事件循环来捕获用户交互，并且可以竞争访问DOM。Angular确实通过zone.js更改了检测，React构建了一个虚拟DOM来生成真正的DOM补丁。所以基本上，对角界面没有反应。

此外，React是围绕单向范式构建的，而Angular具有双向数据绑定，这将使组件的工作方式非常不同。

本文对这两种方法进行了很好的比较。作者在Angular和React中创建同一应用程序一次，并使用其他库创建一次。