React.js 未捕获错误：不变违规答案

【问题标题】：React.js Uncaught Error: Invariant ViolationReact.js 未捕获错误：不变违规
【发布时间】：2017-04-26 02:04:52
【问题描述】：

在由于缺乏对 Commonjs 模块的支持而对 react_rails gem 感到沮丧之后，我正在测试来自 netguru 的 react_webpack_rails gem。但从那以后我得到了一个不变的违反。

例如，如果我正在用 ES6 语法编写一个简单的 Hello World 组件：

import React from 'react';

class tasksBox extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

export default tasksBox;

提出这些错误：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

非常感谢您的帮助，我不知道错误来自哪里。

【问题讨论】：

那里的代码没有问题，所以问题出在其他地方
您究竟想如何渲染tasksBox？
如果更改大小写确实可以解决问题，那么您的实际代码肯定有所不同。
不，我创建了一个只有这个组件的新应用程序。我正在使用的设置可以在那里找到github.com/netguru/react_webpack_rails

标签： reactjs webpack

【解决方案1】：

嗯，答案很简单，需要把类名的第一个字母大写。一切顺利。

import React from 'react';

class TasksBox extends React.Component {
  render() {
    return <div>blabla</div>;
  }
}

export default TasksBox;

感谢你们的帮助。

【讨论】：

这是我的回答中的一个规范
抱歉错过了。其他 cmets 也是如此，因为下面的课程只是一个赤裸裸的例子。你的回答被接受了:)
这是不正确的。问题不在于这个组件。如您所见，类名不必大写：jsfiddle.net/rprwgv52。错误显示“...但得到：未定义”这一事实表明您没有正确导入组件。
好吧，既然你在 Facebook 工作，我相信你是对的。但代码中没有其他任何更改，只有类的名称。但它在我的 index.js 中也发生了变化，我导入了所有组件和 html 文件中的 rails helper。我敢肯定，大写在某处很重要

【解决方案2】：

您的反应组件的名称无效。它必须像这样大写：

export class TasksBox extends React.Component {
    render() {
        return <div>Hello World</div>;
    }
}

您可以内联导出类。请注意，我将名称更改为以大写字母 TasksBox 而不是 tasksBox 开头，因为 React 希望您的类名以大写字母开头

编辑：如果您的示例没有状态或其他自定义函数，则不需要将其作为 React 类.. 而是可以像这样是无状态函数/组件

export default (props) => {
    return <div>Hello World</div>;
}

【讨论】：

如果不覆盖构造函数，则无需调用super()。类名的大小写也不重要，在 JSX 中很重要，但我们看不到 tasksBox 是如何呈现的。
@FelixKling 如果我没记错的话，如果你不覆盖构造函数，你就没有类的状态吗？答案中还推荐了其他一些东西
查看我对其他事情的编辑评论。对，你没有状态，但是组件不使用状态，所以这不是问题。我并不是说您的建议是错误的，而是暗示它们不会解决用户遇到的问题。
是的，但这不是我推荐的唯一东西。我还建议在类名上使用大写字母，这是正确的答案。我认为使用构造函数是必须的，因为任何实际的反应类使用它，它更有意义
“因为任何实际的 React 类都使用它” 一点也不。无状态组件是首选。正如我在第一条评论中所说：“类名的大写也不重要，它在 JSX 中很重要，但我们看不到 tasksBox 是如何呈现的”。证明：jsfiddle.net/rprwgv52。当然，如果 OP 实际上有不同的代码，那么它可能与类名的大小写有关。但是帖子中给出的示例当然不需要它。如果 OP 使用import Foo from './tasksBox'; /* ... */ <Foo />，那么它可以正常工作而无需更改。

【解决方案3】：

我知道这是一个较老的问题，但我在尝试使用 react-bootstrap 组件库时遇到了这个问题。

我试图使用新的导入语法 import DropdownButton from 'react-bootstrap' 从“react-bootstrap”导入 DropdownButton，问题是我需要像这样在 DropdownButton 周围使用花括号：import { DropdownButton } from 'react-bootstrap'

【讨论】：