我的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]); } }]);
它不显示任何东西(除了警报)。我期望看到’Hello’打印在那里,但它在控制台中引发以下错误:
Error: Invariant Violation: prepareEnvironmentForDOM(...): Target container is not a DOM element
任何帮助将不胜感激。