如何將反應自定義包用於角度指令

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']))

如果您想創建自己的包裝庫，請查看它的制作方式（渲染、傳遞道具並觀察對它們的更改）