1

プロジェクトに ng-react を使用して reactjs を含めようとしましたが、アプリを実行すると、「反応コンポーネントの 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('/');
            }
        }
    }
]);

誰かが問題を知っていますか？

4

2 に答える 2

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 に答える