Me estoy mudando a React ES6 como la forma recomendada de escribir clases de React. Parto de un ejemplo sencillo:
import React from 'react'; import ReactDOM from 'react-dom'; require('../node_modules/font-awesome/css/font-awesome.css'); require('../node_modules/bootstrap/dist/css/bootstrap.css'); require('jquery'); require('bootstrap'); import Dashboard from './components/Dashboard/Dashboard'; ReactDOM.render( <Dashboard/>, document.getElementById('react-container') );Y mi componente en ES6:
import React from 'react'; class Dashboard extends React.Component { render() { return <h1>Hello, Don Trump</h1> } }Recibo el siguiente error en Chrome 55:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. at invariant (VM1093 bundle.js:9069) at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (VM1093 bundle.js:23166) at ReactCompositeComponentWrapper.performInitialMount (VM1093 bundle.js:23589) at ReactCompositeComponentWrapper.mountComponent (VM1093 bundle.js:23480) at Object.mountComponent (VM1093 bundle.js:16018) at mountComponentIntoNode (VM1093 bundle.js:28717) at ReactReconcileTransaction.perform (VM1093 bundle.js:17017) at batchedMountComponentIntoNode (VM1093 bundle.js:28739) at ReactDefaultBatchingStrategyTransaction.perform (VM1093 bundle.js:17017) at Object.batchedUpdates (VM1093 bundle.js:26233)Creo que hay algo simple que me estoy perdiendo. Se agradece ayuda.
El mensaje de error podría tener razón:
Probablemente olvidó exportar su componente desde el archivo en el que está definido.
Exporte su componente Dashboard de la siguiente manera:
import React from 'react'; class Dashboard extends React.Component { render() { return <h1>Hello</h1> } } export default Dashboard;Agregar
Exportar panel predeterminado
Al final de su componente; Así que el nuevo código será
class Dashboard extends React.Component { render() { return <h1>Hello, Don Trump</h1> } } export default Dashboard;
Necesitas exportar la clase. De hecho, puede exportar y declarar al mismo tiempo
import React from 'react'; export default class Dashboard extends React.Component { render() { return <h1>Hello</h1> } }