1

我一直在尝试使用 ng-react 在我的项目中包含 reactjs，但是当我运行应用程序时会抛出错误“找不到反应组件 LoginComponent”。

结构：

  • 组件（文件夹）
    • 登录组件.js
  • 控制器（文件夹）
    • 登录.js
  • 指令（文件夹）
    • 登录.js
  • 视图（文件夹）
    • 登录.html
  • 应用程序.js

索引.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');
} );

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('/');
            }
        }
    }
]);

有人知道是什么问题吗？

4

2 回答 2

1

尝试编译 JSX 文件。对我来说，它奏效了。

于 2016-04-08T11:14:04.650 回答
1

这一行：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
        );
    }
}));
于 2016-04-09T20:27:07.170 回答