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

由于缺乏对Commonjs模块的支持，从react_rails gem中感到沮丧之后，我正在从netguru测试react_webpack_rails gem。但从那以后我得到了一个不变的违规。React.js未捕获错误：不变违规

例如，如果我正在写在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.

您的帮助将非常感激，我不能图中错误来自哪里。

来源

2015-10-27 Jonas Barenfeld

没有错的代码中有这样的问题是其他 –

您究竟如何渲染'tasksBox'？ –

如果更改大小写确实解决了问题，那么您的实际代码必须不同。 –

反应组件的名称无效。它必须如下所示大写：

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

您可以内联导出类。请注意，我改变了名字，开始以一个大写字母TasksBox代替tasksBox的阵营需要您的类名称开始以大写字母

编辑：如果您的例子有没有国家或其他自定义的功能，你不需要这是一个阵营类..而是它可以像这样

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

来源

2015-10-27 19:04:20

如果您不覆盖构造函数，则不需要调用'super（）'。类名的大小写无关紧要，它在JSX中很重要，但我们不知道'tasksBox'是如何呈现的。 –

@FelixKling如果你没有重写构造函数，那么你没有在这个类上有一个状态，如果我没有弄错的话？还有其他一些在回答中推荐的东西 –

请参阅我关于其他事情的编辑评论。没错，你没有状态，但组件不使用状态，所以这不是问题。我并不是说你的建议是错误的，我暗示他们不会解决用户的问题。 –

好无状态功能/部件，答案很简单，把类名的首字母大写字母需要。和一切进展顺利。

import React from 'react'; 

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

export default TasksBox;

感谢您的帮助球员。

来源

2015-10-27 19:10:32

这是我的回答 –

中的规范对不起，错过了。其他评论也是如此，下面这个类只是一个裸体的例子。你的回答被接受:) –

这是不正确的。问题不在于这个组件。如您所见，类名不一定要大写：https：//jsfiddle.net/rprwgv52/。事实上，错误表示“...但得到：未定义”，而是指出您没有正确导入组件。 –

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

我试图从“反应过来的自举”采用全新进口语法import DropdownButton from 'react-bootstrap'，问题导入DropdownButton是，我需要周围DropdownButton大括号就像这样：import { DropdownButton } from 'react-bootstrap'

来源

2016-08-17 15:23:45 MaxMarchuk

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

回答

相关问题