React.js Uncaught Error: Invariant Violation

Question

由于缺少对 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.

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

Answer 1

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

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

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

开头

编辑：如果您的示例没有状态或其他自定义函数，您不需要将其作为 React Class.. 但它可以是无状态的 Function/Component，例如 [=14] =]

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

Answer 2

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

import React from 'react';

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

export default TasksBox;

感谢大家的帮助。

Answer 3

我知道这是一个较旧的问题，但我在尝试使用 react-bootstrap 组件库时只是运行进入这个问题。

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

React.js Uncaught Error: Invariant Violation

React.js Uncaught Error: Invariant Violation

reactjs

webpack