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

Question

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

---

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

一些代码：

---

1. 角度应用：

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

2. 该包已链接到项目中，因此“my-package”位于 angular 的node_modules文件夹中。

3. 应用程序使用bower & gruntfile.js来收集应用程序的所有 js 文件

4. 我不能在指令文件中使用import或require 。

5. 所以我想念一些babel / browserify配置来完成这项工作。？？？？

欢迎任何帮助。

Answer 1

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

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

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