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

Posted 2023-02-22

【中文标题】在 Angular 2 中使用 React，错误类型错误：无法读取未定义的属性“渲染”

【英文标题】：using React inside Angular 2, ERROR TypeError: Cannot read property 'render' of undefined

【发布时间】：2018-02-13 04:20:52

【问题描述】：

我正在尝试在我的 Angular 2 应用程序中包含一个为 react 编写的库，但无论我尝试什么，ReactDOM 似乎都未定义打字稿，即使该变量在 chrome 的 javascript 检查器中具有内容。 （image of chrome error message 和一个 image of chrome breakpoint right before error)

为了隔离问题，我查看了将两者结合起来的其他尝试，但只找到了 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;

应该包含一个 react 组件的 Angular 组件如下所示：

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

这是我的 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> 

提前非常感谢！

【问题讨论】：

结合 react 和 angular 是一个真的坏主意。通过导入 reactDOM，您实际上是在加载相互竞争的虚拟 DOM 和事件循环。现在停下来，选择其中一个。

即使大多数时候 gui 主要由一个或另一个组成？我正在尝试构建一个类似搅拌机的节点编辑器，this 是我能找到的唯一一个在 MIT 许可或类似许可下的库。所以它可能是节点编辑器或其他内容

这看起来很酷。我建议只为你的 webapp 使用 React 而不是 Angular。也许从 Storm 库开始，然后从那里开始。

在阅读了关于两者的更直接比较后，我正在考虑使用 react。所以要回答这个问题，你能指出它最终会在哪里失败吗？因为 Angular 2 通常被描述为开箱即用的框架，您可以在以后根据需要替换模块，而 React 被描述为 MVC 中的 V，您必须自己选择其他模块。存在使两者完全不兼容的功能核心重叠并不是很清楚（甚至似乎在 beta 版本中有效）

基本上 Angular 是 React 的超集。因此，您已经使用 Angular 获得了模块化组件功能。为了模仿应用程序状态，您通常会将 Redux 添加到 React，但 Angular 原生包含它。虽然您可以将两者结合起来，但这是一种糟糕的技术方法，并且会给您的应用带来多个重叠、甚至相互竞争的框架的负担。

【参考方案1】：

虽然可以将 Angular 2 和 React 结合起来，但它被认为是一种糟糕的技术方法。虽然 Angular 是一个模块化框架，但尝试使用 React 替换 UI 模块会导致更多错误。原因是 React 和 Angular 在创建用户界面时有时会采用非常不同的方法， 使用不同的事件循环来捕获用户交互，并且可以竞争访问 DOM。 Angular does change detection through zone.js 和 React builds a virtual DOM to generate real DOM patches。所以基本上没有 React-to-Angular 接口。

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

This article 很好地比较了两者。作者在 Angular 中创建了一次相同的应用程序，并在 React 中使用其他库创建了一次。