Javascript AngularJS指令进入React应用程序

我们正在考虑使用React编写一个新的应用程序，但需要一些特定于我们业务的现有Angular指令，例如修改的Angular日期选择器。有很多组件，所以我们无法全部重写它们

我想知道是否有人有经验或知道这方面的努力或可行性

---

到目前为止，我找到的唯一一篇关于这方面的文章是。我发现的大多数资源都提到了另一种方式，即添加了React的Angular应用程序

有一个名为的库，可以在react组件中重用angularjs代码。你可以看看它是否适合你的需要。：）

我编写了一个简单的演示应用程序，展示了如何实现它：

基本步骤如下：

创建一个react组件，该组件将承载DOM中的角度组件。此组件应始终呈现一个简单的html元素（例如a

htmldevelment

），以便在协调虚拟DOM和真实DOM时不会混淆react

安装react组件后，在呈现的

HTMLLevel

下创建一个阴影根，并在其下初始化角度应用程序。这将确保angularJS组件被封装，不受react应用程序的影响，反之亦然

---

点击查看演示。检查react应用程序样式如何不影响angular组件的样式。

独立于angular，

ref

是一种方法：它提供对底层DOM节点的访问，以及以任何方式（包括AngularJS）操纵该节点内DOM的能力。您的更改将保留—至少在react完全清除组件之前

您可以在react by中创建一个ref

<divOrAnyOtherDom ref={((el) => {this._elem=el;}).bind(this)}></...

现在，您在DOM节点react中获得了angular

（我从一个稍有不同的集成：Vaadin到AngularJS，但原理是一样的：Vaadin和react一样，给你一个DOM节点。如果你对完整的代码感兴趣：）

另外：对于来自角度组件的任何回调，您可能必须使用

setState

等

let baseElement = angular.element(this._elem);
let templateElement = angular.element(templateSource);
angular.injector([ 'ng', moduleName ]).invoke(function($compile, $rootScope) {
    let cmp = $compile(templateElement);
    scpe = $rootScope.$new(false);
    scpe.varname = whateverYouHave; # point is: you can set scope variables
    cmp(scpe);
    baseElement.append(templateElement);
    scpe.$digest();
});