我试图将ReactJS与AngularJS一起使用，但没有成功。有人能告诉我如何把它们粘在一起吗？或者请指出这里缺少什么？
我的index.html如下：
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>My Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body data-ng-controller="Ctrl1">
<div id="myDiv">
<button id="btn1" data-ng-click="clickMe()">Click Me</button>
</div>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script type="text/jsx" src="reactExample.js"></script>
<script src="angularExample.js"></script>
</body>
</html>
以下是我的reactExample.js的编写方式：
/**
* @jsx React.DOM
*/
var testMy = React.createClass({
render: function(){
return ( <p>Hello</p>)
}
});
我的angularExample.js如下：
var myapp = angular.module('MyApp',[]);
myapp.controller('Ctrl1',['$scope',function($scope){
$scope.clickMe = function(){
alert("Clicked!");
React.renderComponent(testMy, elem[0]);
}
}]);
它不显示任何内容(除了警报)。我希望看到"你好"打印在那里，但它在控制台中抛出以下错误：
Error: Invariant Violation: prepareEnvironmentForDOM(...): Target container is not a DOM element
任何帮助都将不胜感激。
@Simon Smith已经提到了为什么React.renderComponent中的错误需要第二个参数，但您在控制器中进行DOM操作的方式不合适。在AngularJs中，DOM操作应在directive中。让我们看看它如何成为
来自Facebook的React vs AngularJS：更近距离观察博客
React组件比Angular模板强大得多；它们应该与Angular的指令进行比较。
本博客底部一起使用React和AngularJS部分，您可以看到angular和react如何一起玩。
来自反应网站
React组件实现了一个render()方法，该方法获取输入数据并返回要显示的内容。
在angularjs中，组件由directive渲染
请参阅plunker，其中我集成了angularjs和react。
在react-example.js中，我创建了virtual dom元素
var Hello = React.createClass({
render: function() {
return React.DOM.div({}, 'Hello ' + this.props.name);
}
});
myMessage指令使virtual dom
React.renderComponent(Hello({name: scope.myModel.message}), document.getElementById('example'));
其中virtual dom的name属性将与scope.myModel.message绑定
为了在我的控制器中使用React，我做了这个
myApp.controller(function($scope){
$scope.myComponent = {};
$scope.myComponent.setState({data: "something"});
});
在我的React组件中：
window.myComponent = React.createClass({
getInitialState: function(){
return {
data:''
}
},
componentWillMount: function(){
var scope = this.props.scope;
scope.myComponent = this;
},
render:func .....
});
我使用的是David Chang的ngReact指令，它将$scope作为属性传递到组件中。因此，现在您可以从控制器调用setState，强制react组件重新渲染：)
我在React Sandbox 中有一个更大的例子
我会考虑通过指令进行集成，因为这通常是将非角度代码与角度代码集成的推荐方法。
这里有一个例子：
angular.module('app').directive('greeting',[function(){
return {
restrict:'AE',
scope:{name:'@'},
link: function (scope, elem, attrs){
var GreetingSection = React.createClass({displayName: 'Greeting',
render: function() {
var message = "Good morning " + this.props.data.name + ", how are you?";
return React.createElement('div', {className: "greeting"},message);
}
});
React.renderComponent(GreetingSection({data:scope}), elem[0]);
}
};
}]);
此处的更多信息(链接已失效；指向archive.org副本)：
http://www.syntaxsuccess.com/viewarticle/547bbd04fa0710440b45e41c
请尝试使用ngReact角度模块，而不是直接使用ReactJs。这也提供了与angularJ的无缝集成。检查样品/示例@https://github.com/davidchang/ngReact
renderComponent需要一个DOM元素作为注入组件的第二个参数。这似乎就是错误所抱怨的。