ReactJS如何在scrip.js文件中导入自定义组件，如下所示_Reactjs

ReactJS如何在scrip.js文件中导入自定义组件，如下所示

reactjs

ReactJS如何在scrip.js文件中导入自定义组件，如下所示,reactjs,Reactjs,我有三份档案 index.html home.js(component) script.js(main file). =========================================== index.html <!DOCTYPE html> <html lang="en"> <head> <title>ReactJS Application</title> </head>

我有三份档案

 index.html
 home.js(component)
 script.js(main file).

===========================================

index.html

  <!DOCTYPE html>
  <html lang="en">
   <head>
    <title>ReactJS Application</title>
   </head>
    <body class="bgImg">

   <script src="react/js/react-15.0.0.js"></script>
   <script src="react/js/react-dom-15.0.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-   core/5.8.34/browser.min.js"></script>
   <script src="react/js/react-router.js"></script>


 <!-- jQuery library -->
<script src="jquery/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>

<!-- local script -->
<script src="local/js/components/home.js" type="text/babel"></script>
    <script src="local/js/routings/script.js" type="text/babel"></script>


<!-- bootstrap styles -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

 <!-- local styles -->
<link rel="stylesheet" type="text/css" href="local/css/style.css">

<!-- appending data here -->
<div id="reactApp"></div>

  </body>
</html>


ReactJS应用程序

====================================

home.js

var Home = React.createClass({

 render: function() {
      return (
              <div className="info">
                 <p>Home component</p>
            </div>
            )
   }
 });

 import {Home} from '../components/home.js';

 var Router = ReactRouter;

 var Link = Router.Link;

 var DefaultRoute = Router.DefaultRoute;

var Route = Router.Route;

var RouteHandler = Router.RouteHandler;

/*
 * MenuComponent default component
 */

var MenuComponent = React.createClass({

render: function() {
      return (
        <div>
            <div className="header">
                <ul>
                <li><Link to="home">Home</Link></li>    
                <li><Link to="register">Register</Link></li>

                </ul>

         </div>

                <center>
                      <RouteHandler></RouteHandler>
                  </center>


        </div>
      )
    }

 });//end  menu component

var Home=React.createClass({
render:function（）{
返回(
主分量
)
}
});

script.js

var Home = React.createClass({

 render: function() {
      return (
              <div className="info">
                 <p>Home component</p>
            </div>
            )
   }
 });

 import {Home} from '../components/home.js';

 var Router = ReactRouter;

 var Link = Router.Link;

 var DefaultRoute = Router.DefaultRoute;

var Route = Router.Route;

var RouteHandler = Router.RouteHandler;

/*
 * MenuComponent default component
 */

var MenuComponent = React.createClass({

render: function() {
      return (
        <div>
            <div className="header">
                <ul>
                <li><Link to="home">Home</Link></li>    
                <li><Link to="register">Register</Link></li>

                </ul>

         </div>

                <center>
                      <RouteHandler></RouteHandler>
                  </center>


        </div>
      )
    }

 });//end  menu component

从“../components/Home.js”导入{Home}；
var路由器=反应式路由器；
var-Link=路由器.Link；
var DefaultRoute=Router.DefaultRoute；
var-Route=路由器.Route；
var RouteHandler=Router.RouteHandler；
/*
*MenuComponent默认组件
*/
var MenuComponent=React.createClass({
render:function（）{
返回(

主页
登记册

)
}
});//结束菜单组件

/寄存器组件/

var Register=React.createClass({
render:function（）{
返回(
使用React注册
输入名字：
输入姓氏：
输入Phno：
输入EmailId:
)
}
});
/*
*路由配置
*/
变量路由=(
);
/*运行路线*/
Router.run（路由、函数（处理程序）{
ReactDOM.render（，document.getElementById（'reactApp'）；
});

=====================================

在运行上述代码之后我在浏览器控制台中遇到如下错误

script.js:2 Uncaught ReferenceError: require is not defined
at eval (eval at n.run (browser.min.js:3), <anonymous>:5:25)
at Function.n.run (browser.min.js:3)
at l (browser.min.js:3)
at browser.min.js:3
at XMLHttpRequest.s.onreadystatechange (browser.min.js:3)
(anonymous) @ routing.js:2
 n.run @ browser.min.js:3
 l @ browser.min.js:3
  (anonymous) @ browser.min.js:3
s.onreadystatechange @ browser.min.js:3

script.js:2 Uncaught ReferenceError: require is not defined
at eval (eval at n.run (browser.min.js:3), <anonymous>:5:25)
at Function.n.run (browser.min.js:3)
at l (browser.min.js:3)
at browser.min.js:3
at XMLHttpRequest.s.onreadystatechange (browser.min.js:3)
(anonymous) @ routing.js:2
n.run @ browser.min.js:3
l @ browser.min.js:3
(anonymous) @ browser.min.js:3
s.onreadystatechange @ browser.min.js:3

script.js:2 Uncaught ReferenceError: require is not defined
at eval (eval at n.run (browser.min.js:3), <anonymous>:5:25)
at Function.n.run (browser.min.js:3)
at l (browser.min.js:3)
at browser.min.js:3
at XMLHttpRequest.s.onreadystatechange (browser.min.js:3)


if i write entire home.js code in the script file itself,
 the code works for me.

 But if I seperate home component and importing in   script 
 i got above error.

could anyone help to resolve this, how to import components and its usage.

script.js:2未捕获引用错误：未定义require
评估时（评估时n.run（browser.min.js:3），：5:25）
在Function.n.run（browser.min.js:3）
在l（browser.min.js:3）
在browser.min.js:3
在XMLHttpRequest.s.onreadystatechange（browser.min.js:3）
（匿名）@routing.js:2
n、 运行@browser.min.js:3
l@browser.min.js:3
（匿名）@browser.min.js:3
s、 onreadystatechange@browser.min.js:3
script.js:2未捕获引用错误：未定义require
评估时（评估时n.run（browser.min.js:3），：5:25）
在Function.n.run（browser.min.js:3）
在l（browser.min.js:3）
在browser.min.js:3
在XMLHttpRequest.s.onreadystatechange（browser.min.js:3）
（匿名）@routing.js:2
n、 运行@browser.min.js:3
l@browser.min.js:3
（匿名）@browser.min.js:3
s、 onreadystatechange@browser.min.js:3
script.js:2未捕获引用错误：未定义require
评估时（评估时n.run（browser.min.js:3），：5:25）
在Function.n.run（browser.min.js:3）
在l（browser.min.js:3）
在browser.min.js:3
在XMLHttpRequest.s.onreadystatechange（browser.min.js:3）
如果我在脚本文件中编写完整的home.js代码，
代码对我有用。
但是如果我把主组件和脚本中的导入分开
我犯了以上错误。
任何人都可以帮助解决这个问题，如何导入组件及其用法。

您是否有

从“React”导入React和module.exports=Homehome.js文件中的statements是的，我添加了如下内容从“React”导入React/*home component*/var home=React.createClass（{render:function（）{return（home component
）}）；module.exports=Home；从index.html尝试并删除
，因为您已经在script.js文件中导入了它。好吧，让我试试ShubhamOtherwise，处理此类问题的更好方法是设置一个网页包配置，如果您对它开放，您是否有从“React”导入React和module.exports=Homehome.js文件中的statements是的，我添加了如下内容从“React”导入React/*home component*/var home=React.createClass（{render:function（）{return（home component
）}）；module.exports=Home；从index.html尝试并删除
，因为您已经在script.js文件中导入了它。好的，让我试试ShubhamOtherwise，处理此类问题的更好方法是，如果您愿意的话，设置一个网页包配置，