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

嗯，答案非常简单，需要将大写字母的第一个字母放在大写字母中。一切顺利。

import React from 'react';

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

export default TasksBox;

感谢你的帮助。

Answer 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>;
}

Answer 3

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

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

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

3 个答案: