0
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?
Belassen Sie den Standardexport in feed.js und wechseln Sie in routes.js zu 'Import Feed from './Feed';' – azium