我一直在尝试用ng-react将我的reactjs包含在我的项目中，但是当我运行该应用程序时，抛出错误“无法找到React组件LoginComponent”。
结构：
组件（文件夹）
LoginComponent.js
控制器（文件夹）
login.js
指令（文件夹）
login.js
视图（文件夹）
login.html
app.js
index.html：
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../bower_components/alertify.js/dist/css/alertify.css">
</head>
<body ng-app="gameApp">
<div ng-view=""></div>
<!-- COMPONENTS -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/react/react.js"></script>
<script src="../bower_components/react/react-dom.js"></script>
<script src="../bower_components/ngReact/ngReact.min.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/alertify.js/dist/js/alertify.js"></script>
<script src="../bower_components/babel/browser.js"></script>
<!-- SOCKET.IO -->
<script src="../node_modules/socket.io-client/socket.io.js"></script>
<!-- REACT COMPONENTS -->
<script type="text/babel" src="js/components/LoginComponent.js"></script>
<!-- DIRECTIVES -->
<script src="js/directives/login.js"></script>
<!-- JAVASCRIPT FILES -->
<script src="js/app.js"></script>
<!-- CONTROLLERS -->
<script src="js/controllers/login.js"></script>
<!-- SERVICES -->
<script src="js/services/commonServices.js"></script>
</body>
</html>
app.js：
'use strict';
/**
* @ngdoc overview
* @name gameApp
* @description
* # gameApp
*
* Main module of the application.
*/
angular //modules
.module('gameApp', ['ngResource',
'ngRoute',
'react',
//services
'commonServices',
//directives
'loginDirective'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'js/views/login.html',
controller: 'LoginController'
})
});
LoginComponent.js：
login.value('LoginComponent', React.createClass({
propTypes: {
username : React.PropTypes.string.isRequired
},
render: function() {
return <span>Hi {this.props.username}</span>;
}
}));
login.js（指令）：
'use strict';
var loginDirective = angular.module('loginDirective', []);
loginDirective.directive( 'login', function( reactDirective ) {
return reactDirective( 'LoginComponent');
} );
login.html（视图）：
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h1 class="text-center login-title">Choose your name</h1>
<form>
<div class="form-group">
<input type="text" ng-model="username" class="form-control" placeholder="Name" autofocus>
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" ng-click="setUsername()">Enter</button>
</div>
</form>
<login username="username" />
</div>
</div>
</div>
login.js（控制器）：
var login = angular.module('gameApp');
login.controller('LoginController', ['$scope', '$location', 'commonServices',
function($scope, $location, commonServices) {
$scope.username = '';
$scope.setUsername = function() {
if($scope.username.trim() == '') {
alertify.error("The name can't be empty");
} else {
commonServices.setUsername($scope.username);
$location.path('/');
}
}
}
]);
有人知道出什么问题了吗？
最佳答案
这行代码：return <span>Hi {this.props.username}</span>;是无效的JavaScript，因为它包含JSX，因此违反了指令。如果要使用JSX，则需要在工作流程中添加一个编译步骤。
查看我的博客文章，将JSX和ES6编译添加到您的项目http://blog.tylerbuchea.com/migrating-angular-project-to-react/
为确保这实际上是问题，请尝试使用以下代码替换当前的LoginComponent代码。我只是使用了您当前的代码，并使用了在线编译器https://babeljs.io/repl/，所以下面的代码应该都是有效的ES5 JavaScript。
尝试这个：
'use strict';
login.value('LoginComponent', React.createClass({
propTypes: {
username: React.PropTypes.string.isRequired
},
render: function render() {
return React.createElement(
'span',
null,
'Hi ',
this.props.username
);
}
}));