我有一个页面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.
我相信问题是由于当react想要找到 DOM 时 DOM 没有准备好。
在 Angular 准备好 DOM 后，如何让 React 开始工作？
我之前通过将 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 组件。