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

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