React.render() 在一个 js 文件中创建组件并在另一个 js 文件中呈现时出错

Question

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

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

Answer 1

你确实错过了

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

所以

 document.getElementById('content')

找不到任何东西。重要的是将它放在上方参考你的 app.js.

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

React.render() 在一个 js 文件中创建组件并在另一个 js 文件中呈现时出错

React.render() is giving error when we create component in one js file and render it in another js file

javascript

rendering

node.js

reactjs