我一直在尝试使用 ng-react 在我的项目中包含 reactjs，但是当我运行该应用程序时抛出错误“找不到 react 组件 LoginComponent”。
结构:
- 组件(文件夹)
- 登录组件.js
- Controller (文件夹)
- 登录.js
- 指令(文件夹)
- 登录.js
- View (文件夹)
- 登录.html
- 应用程序.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>
应用程序.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'
})
});
登录组件.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');
} );
登录.html( View ):
<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( Controller ):
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
);
}
}));
关于javascript - 找不到 react 组件 LoginComponent - ng-React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35256295/