Errore React.js Uncaught: Violazione invariata

Question

Dopo essersi frustrato dalla gemma react_rails a causa della mancanza di supporto per i moduli Commonjs, sto testando la gemma react_webpack_rails da netguru. ma da allora ho avuto una violazione invariante.

Per esempio, se sto scrivendo un semplice componente Ciao Mondo nella sintassi ES6:

import React from 'react'; 

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

export default tasksBox; 

sollevare questi errori:

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. 

il vostro aiuto sarà molto apprezzato, non posso capire da dove viene l'errore.

Answer 1

Il nome del componente di risposta non è valido. Deve essere capitalizzato in questo modo:

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

È possibile esportare la classe in linea. Notate che ho cambiato il nome di iniziare con una lettera maiuscola TasksBox invece di tasksBox come Reagire vuole il nome della classe per iniziare con la lettera maiuscola

---

EDIT: se il vostro esempio non ha funzioni definite personalizzati statali o di altri non voi bisogno questo sia un Reagire classe .. ma piuttosto può essere un Stateless Funzione/Componente in questo modo

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

Answer 2

Beh, la risposta è stata molto semplice, necessaria per mettere la prima lettera del nome di classe in lettera maiuscola. e tutto è andato bene.

import React from 'react'; 

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

export default TasksBox; 

grazie per il vostro aiuto ragazzi.

Answer 3

So che questa è una domanda precedente, ma mi sono imbattuto in questo problema solo quando ho provato ad usare la libreria dei componenti react-bootstrap.

Stavo tentando di importare DropDownButton da 'reagire-bootstrap' utilizzando la nuova sintassi di importazione import DropdownButton from 'react-bootstrap' e il problema era che avevo bisogno di parentesi graffe intorno DropDownButton in questo modo: import { DropdownButton } from 'react-bootstrap'