当我们在一个 js 文件中创建组件并在另一个 js 文件中呈现它时，React.render() 会出错答案

【问题标题】：React.render() is giving error when we create component in one js file and render it in another js file当我们在一个 js 文件中创建组件并在另一个 js 文件中呈现它时，React.render() 会出错
【发布时间】：2015-10-01 08:29:06
【问题描述】：

我是 Reactjs 的新手。我已经从https://facebook.github.io/react/docs/getting-started.html下载了最新的JS文件包

我在我的 HTML 文件中设置了 JavaScript 文件的路径并开始处理它。

当我在同一个文件中创建一个组件并在同一个 JavaScript 文件中呈现该组件时，它工作正常。但是当我在一个 JavaScript 文件中创建一个组件并通过导入在另一个 JavaScript 文件中呈现它时，它给了我错误。

下面是示例代码，它正在工作：

var FindEmp= React.createClass({
    render:function(){
        return(
                <p>EMPID <input type='text'/></p>
                );
    }
});

React.render(<FindEmp/> , document.getElementById('content'))

如果把它写在下面的 2 个文件中它不起作用

app.js

'use strict';

var React = require('react');
var React = require('react/addons');
var FindEmp= require('./components/FindEmp.react');


React.render(<FindEmp/> , document.getElementById('content'));  //This Line is                    giving me error saying

FindEmp.react.js

var React = require('react');
var ReactPropTypes = React.PropTypes;

var FindEmp = React.createClass({
    render:function(){
        return(
                <p>EMP ID <input type='text'/></p>
                );
    }
});
module.exports = FindEmp;

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
    <script src="lib/JSXTransformer.js"></script>
    <script src="lib/react.js"></script>
    <script src="lib/react-with-addons.js"></script>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/marked.min.js"></script>
</head>
<body>

<script type="text/jsx" src="js/app.js"></script>
    <script type="text/jsx">

    </script>
</body>
</html>

【问题讨论】：

Uncaught SyntaxError: Unexpected token
我正在使用 browser.js
即使我在命令行中使用 npm 尝试了 babel。当我执行 webpack -w 时。它说 webpack 不是内部或外部命令。我在网站egghead.io/series/build-your-first-react-js-application 上尝试了笔记记录器教程视频

标签： javascript node.js reactjs rendering

【解决方案1】：

你确实错过了

 <div id="content"></div>

所以

 document.getElementById('content')

什么都找不到。将它置于对您的 app.js 的引用非常重要。

【讨论】：

哦，谢谢指正。现在我收到错误：未捕获的 ReferenceError：未定义要求
首先我必须承认我也是 React 新手，只是想边做边学，所以请原谅我的错误。无论如何，在客户端使用 require 对我来说看起来很奇怪。您的程序从 index.html 开始，一切都在客户端的浏览器中运行，因此没有 require 或类似 nodeJS 的东西。您可以简单地将代码拆分为 2 个单独的文件，然后将它们都包含在

【解决方案2】：

对于这个示例，我使用的是 react.js 文件。删除 js 文件并开始使用 npm react 工具和 web pack。这解决了我的问题。我已经通过以下站点获取示例.. http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/

【讨论】：