Chrome

2017-01-20 30 views
8

kullanarak Ecmascript6 sınıf sorunları ile reaksiyona girme React sınıflarını yazmak için önerilen yol olarak ES6'yı karıştırmaya çalışıyorum. Ben basit bir örnekten başlıyorum:Chrome

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') 
); 

Ve ES6 benim bileşen:

import React from 'react'; 


class Dashboard extends React.Component { 
    render() { 
    return <h1>Hello, Don Trump</h1> 
    } 
} 

Ben Chrome 55 aşağıdaki hatayı alıyorum:

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) 

Orada düşünüyor basit bir şey eksik. Appreacited Yardım.

+0

Pano Bileşen –

cevap

15

hata mesajı doğru olabilir:

Muhtemelen bu tanımlanmış oluyor dosyadan bileşeni ihraç etmeye unuttum

Dışa sizin Dashboard bileşeni aşağıdaki gibi:.

import React from 'react'; 

class Dashboard extends React.Component { 
    render() { 
    return <h1>Hello</h1> 
    } 
} 

export default Dashboard; 
+2

Huh için "ihracat varsayılan" eklemeniz gerekir de beyan !!! Çok temel eksik ... Teşekkürler .... – Mendes

4

Add

ihracat Varsayılan Gösterge Tablosu bileşenin sonunda

; Yani yeni kod Derslere dışa gerekir

class Dashboard extends React.Component { 
    render() { 
    return <h1>Hello, Don Trump</h1> 
    } 
} 
export default Dashboard; 
1

olacaktır. Aslında, ihracat ve aynı zamanda

import React from 'react'; 

export default class Dashboard extends React.Component { 
    render() { 
    return <h1>Hello</h1> 
    } 
}