Javascript 如何将react自定义包使用到angular指令中

嗨，我有一个angular v1.x应用程序和一个react定制包。

---

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

一些代码：

---

angular应用程序：

使用

我的软件包的指令

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

从“../../main”导入应用程序
从“React”导入React；
从“react dom”导入react dom；
从“我的包”导入我的包；
const reactDirective=app.directive（'injectReact'，function（）{
返回{
模板：“”，
作用域：{}，
链接：功能（范围、el、属性）{
scope.newItem=（值）=>{alert（值）}
const reactapp=document.getElementById（'reactapp'）
scope.$watch（'scopeval'，函数（newValue，oldValue）{
如果（角度已定义（新值））{
ReactDOM.render(
，app）；
}
}，对）；
}
}
})

程序包链接到项目中，因此“我的程序包”位于angular的
node\u modules
文件夹中

应用程序使用
bower&gruntfile.js
获取应用程序的所有js文件

我无法使用
导入
或
要求
到指令文件中

因此，我错过了一些使之工作的
babel
/
browserify
配置

欢迎提供任何帮助。
实现这一点的最简单方法是使用外部软件包，如。这个包允许您创建angular.js包装组件，它将呈现特定的react组件，允许您向它们传递道具。链接过程非常简单：

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

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