文章/答案/技术大牛

发布

社区首页 >问答首页 >找不到react组件LoginComponent - ng-React

问找不到react组件LoginComponent - ng-React
EN

Stack Overflow用户

提问于 2016-02-07 16:54:12

回答 2查看 2.4K关注 0票数 1

我一直试图在我的项目中加入reactjs，但是当我运行这个应用程序时，会抛出错误“无法找到react”。

结构：

组件(文件夹)
- 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>;
    }
}));

'use strict';

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

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

<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>

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

有人知道问题出在哪里？

reactjs

ngreact

javascript

angularjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-04-09 20:27:07

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

票数 1

Stack Overflow用户

发布于 2016-04-08 11:14:04

尝试编译JSX文件。对我来说很管用。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35256295

复制

相似问题

问找不到react组件LoginComponent - ng-React
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问找不到react组件LoginComponent - ng-ReactEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问找不到react组件LoginComponent - ng-React
EN