如何将反应自定义包用于角度指令答案

【问题标题】：How to use react custom package into an angular directive如何将反应自定义包用于角度指令
【发布时间】：2020-03-21 00:14:30
【问题描述】：

您好，我有一个 Angular v1.x 应用程序和一个 react 自定义包。

我希望能够在 angular 指令中使用 react 自定义包，最终会显示一个 react 组件。

一些代码：

角度应用：

使用my-package的指令

import app from '../../main'
import React from "react";
import ReactDOM from "react-dom";
import Mypackage from 'my-package';

const reactDirective = app.directive('injectReact', function() {
 return {
  template: '<div id="reactapp" class="react-part"></div>',
  scope: {},
  link: function(scope, el, attrs){
        scope.newItem = (value) => {alert (value)}

        const reactapp = document.getElementById('reactapp')
        scope.$watch('scopeval', function(newValue, oldValue) {
            if (angular.isDefined(newValue)) {
             ReactDOM.render(
                 <div>
                    <Mypackage />
                 </div>
                , reactapp);
           }
        }, true);
     }
  }
})

包已链接到项目中，因此“my-package”位于 Angular 的 node_modules 文件夹中。
应用使用bower & gruntfile.js收集应用的所有js文件
我无法在 directive 文件中使用 import 或 require。
所以我错过了一些 babel/browserify 配置来完成这项工作。????

欢迎任何帮助。

【问题讨论】：

标签： javascript node.js angularjs reactjs babeljs

【解决方案1】：

实现此目的的最简单方法是使用外部包，如 react2angular。这个包允许您创建 angular.js 包装器组件，这些组件将呈现特定的反应组件，允许您将道具传递给它们。链接过程非常简单：

angular
  .module('myModule', [])
  .component('myComponent', react2angular(MyComponent, [], ['$http', 'FOO']))

如果您想创建自己的包装库，请查看它是如何制作的 here（渲染、传递道具并观察对它们的更改）

【讨论】：