Komponente wird nicht in App importiert

Ich richte eine einfache React-App ein, die standardmäßig einen Feed von Artikelelementen rendert, aber mithilfe von react-router auch ähnliche Listen abrufen kann. Das Problem ist, dass ich die mit den Routen gepaarten Komponenten nicht importieren kann.Komponente wird nicht in App importiert

Index.HTML

<html> 
<head></head> 
<body> 
<!-- hard-coded header --> 
<div id="react-content"></div> 
<script src="bundle.js"></script> <!-- webpack js bundle --> 
</body> 
</html>

In webpack bundle.js:

routes.js

import React from 'react'; 
import {render} from 'react-dom'; 
import {Router, Route, IndexRoute, hashHistory} from 'react-router'; 
import {Feed} from './Feed'; 

console.log('routes.js fired'); 

var App = React.createClass({ 
    render() { 
    return (
     <div className="app"> 
     </div> 
    ); 
    } 
}); 

console.log(Feed); 

render((
    <Router history={hashHistory}> 
    <Route path="/" component={Feed} /> 
    </Router> 
), document.getElementById('react-content'));

Feed.js

import React from 'react'; 
import {render} from 'react-dom'; 
import {Link} from 'react-router'; 

var SearchBox = React.createClass({ 
    getInitialState: function() { 
    console.log('getInitialState fired'); 
    return {query: ''}; 
    }, 
    render: function() { 
    return (
    // render - should work fine 
    ); 
    } 
}); 

var ItemList = React.createClass({ 
    render: function() { 
    var itemNodes = this.props.data.reverse().map(function(item) { 
     return (
     // list rendering - works fine on its own 
     ); 
    }); 
    return (
     // render 
    ); 
    } 
}); 

var Feed = React.createClass({ 
    loadItemsFromServer: function() { 
    // ajax call 
    }, 
    getInitialState: function() { 
    console.log('Feed fired'); 
    return {data: []}; 
    }, 
    componentDidMount: function() { 
    this.loadItemsFromServer(); 
    }, 
    render: function() { 
    return (
    // render 
    ); 
    } 
}); 

export default Feed; // have also tried export {Feed};

Wenn ich laufen lasse, erhalte ich routes.js fired, so dass die Datei aufgerufen wird.

Jedoch zeigt console.log(Feed)undefined an. (Wenn ich console.log entweder React oder render bekomme ich das erwartete Objekt)

Gibt es etwas falsch mit der Art, wie ich die Komponente importieren/exportieren oder auf andere Weise zur Verfügung stellen?

Quelle

2016-03-31 zahabba

Belassen Sie den Standardexport in feed.js und wechseln Sie in routes.js zu 'Import Feed from './Feed';' – azium

{Feed} from ... bedeutet, dass Sie die Variable Feed exportieren, die in Ihrem Feed Modul privat ist. Deshalb erhalten Sie undefined, wenn Sie die Variable Feed exportieren. Da Sie bereits export default Feed festgelegt haben, rufen Sie einfach Feed from .. ohne die geschweiften Klammern.

Quelle

2016-03-31 18:29:37

Komponente wird nicht in App importiert

Antwort

Verwandte Themen