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未捕獲錯誤：不變違規

回答

相關問題