React.js Uncaught Error：不変則違反

Question

Commonjsモジュールのサポートが不足しているため、react_railsの宝石か​​ら不満を募らせた後、私はreact_webpack_railsのgemをnetguruからテストしています。それ以来、私は不変的な違反を受けています。例えば

、私は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>; 
    } 
} 

クラスをインラインでエクスポートすることができます。私はTasksBoxの代わりとしてtasksBoxがあなたのクラス名は大文字

---

EDITを開始したいリアクト大文字で開始するように名前を変更注意してください：あなたの例は、いかなる状態または他のカスタム定義された機能を持っていない場合は必要いけませんこれは、クラスに反応する..しかし、むしろそれはそう

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

これはもっと古い質問ですが、反応起動ストラップコンポーネントライブラリを使用しようとすると、この問題が発生しました。

私は「反応し、ブートストラップの新しい輸入構文import DropdownButton from 'react-bootstrap'を使用してからDropdownButtonをインポートしようとしていた問題が、私はそうのようDropdownButton周りの中括弧が必要ということでした。問題があるので、そこのコードで間違ってimport { DropdownButton } from 'react-bootstrap'