Question

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

结构：

组件（文件夹）
- LoginComponent.js
控制器（文件夹）
- login.js
指令（文件夹）
- login.js
次（文件夹）
- 的login.html
app.js

的index.html：

'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'
            })

    });

app.js：

login.value('LoginComponent',  React.createClass({

    propTypes: {
        username    : React.PropTypes.string.isRequired
    },

    render: function() {
        return <span>Hi {this.props.username}</span>;
    }
}));

LoginComponent.js：

'use strict';

var loginDirective = angular.module('loginDirective', []);

loginDirective.directive( 'login', function( reactDirective ) {
  return reactDirective( 'LoginComponent');
} );

login.js（指令）：

<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.html（视图）：

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

login.js（控制器）：

{{1}}

有人知道这个问题是什么吗？

Answer 1

尝试编译JSX文件。对我而言，它有效。

Answer 2

这一行：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
        );
    }
}));

找不到反应组件LoginComponent - ng-React

2 个答案: