Question

我一直在关注此演练：https://simonsmith.io/writing-react-components-as-commonjs-modules/将我的React组件分成单独的文件。我正在使用 ES5 JS ，所以我使用CommonJS和Grunt将JSX转换为可读的JS。

我有6个组件，顶层主要组件是TodoListApp.jsx，然后是index.jsx，它有：

    /** @jsx React.DOM */
    var TodoListApp = require('./TodoListApp.jsx');

    ReactDOM.render(
      <TodoListApp url="/api/todos" updateUrl="/api/todos/update" pollInterval={2000}/>,
      document.getElementById('container')
    );

在每个组件文件的底部，我有module.exports = ...，例如对于TodoListApp.jsx：

    module.exports = TodoListApp;

当运行grunt时，它会构建一个app.built.js文件，该文件将JSX呈现给JS。这就是我的index.html的样子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo List</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  </head>

  <body>
    <div id="container"></div>
    <script src="./scripts/app.built.js"></script>
  </body>
</html>

我还有一个Node.js后端服务器文件，我可以在其中运行并转到http://localhost:3000/

我在控制台中收到以下错误消息：

＆＃34;警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查TodoListApp。＆＃34;

的渲染方法

＆＃34;未捕获的不变违规：元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：object。检查TodoListApp。＆＃34;

的渲染方法

我尝试过的事情：

将ReactDOM.render()函数从index.jsx移动到TodoListApp.jsx但得到相同的错误消息。
使用module.exports = React.createClass({})代替在文件底部使用var TodoListApp = React.createClass({}) module.exports并获取相同的错误消息。
我也尝试过使用：
```
var TodoListApp = require('./TodoListApp.jsx').default;
```
index.jsx文件中的
，而不是上面第一个代码段中显示的.default。但是，然后我收到此错误消息：

＆＃34;警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。＆＃34;

＆＃34;未捕获的不变违规：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。＆＃34;
< / LI>

我有什么遗漏或做错了吗？

ES5 React Error：元素类型无效：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：object

0 个答案: