angularjs - 如何在一个项目中结合 Angular 和 React

Question

我有一个页面 portal.html，它由 Angular 通过路由 portal 呈现

  state('portal', {
    url: '/',
    templateUrl: 'portal.html',
    controller: 'portalCtrl',
  })

但是，我想用 ReactJS 实现一些 UI 组件交互。

我尝试将react.js脚本挂接到body的末尾(由webpack生成)

<script type="text/javascript" src="react_box/react_bundle.js"></script>

但是，我收到了这个错误。

invariant.js:38Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

我相信问题是由于当React想要找到DOM时DOM还没有准备好。

在 Angular 准备好 DOM 后，如何使 React 开始工作？

Answer 1

我之前通过将 React 组件包装在指令中将其集成到 Angular 应用程序中。这确保了 React 代码在正确的时间执行。 (我认为您不能通过简单地将 React 内容作为 script 标签包含在内来确保 Angular 已“准备就绪”)。

该指令看起来像这样:

var React = require('react');
var ReactComponent = require('./react-component.jsx');

function ReactDirective() {
   return {
       restrict: 'EA',
       scope: {
           data: '=data'
       },
       template: '<div></div>',
       link: function(scope, element) {
           var renderComponent = function(data) {
               React.render(React.createElement(ReactComponent, {data: data}), element[0]);
           };

           scope.$watch('data', function(newValues) {
               renderComponent(newValues);
           }, true);
        }
    };
}

module.exports = ReactDirective;

然后您可以正常包含该指令。如果您需要 React 代码与 Angular 代码交互，请将回调作为 props 传递给 React 组件。