Question

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

呈现

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

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

我试图在body的末尾挂钩react.js脚本（由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.

我相信这个问题是由于当反应想要找到DOM时DOM没有准备好。

如何在Angular准备好DOM之后让反应开始工作？

Answer 1

我已经将React组件集成到Angular应用程序中，然后将它们包装在一个指令中。这可确保在正确的时间执行React代码。（我不认为你可以通过简单地将React内容包含为script标签来确保Angular已经准备好了＃34;

该指令看起来像这样：

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代码交互，请将回调作为道具传递给React组件。

我如何在一个项目中组合Angular和React

1 个答案: