0
既定では、記事アイテムのフィードをレンダリングするだけでなく、react-routerを使用して同様のリストを取得できる単純なReactアプリケーションを設定しています。問題は、ルートと組み合わされたコンポーネントをインポートできないように見えることです。コンポーネントがアプリケーションにインポートされない
Index.htmlと
のWebPACKbundle.jsで
<html>
<head></head>
<body>
<!-- hard-coded header -->
<div id="react-content"></div>
<script src="bundle.js"></script> <!-- webpack js bundle -->
</body>
</html>
：
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};
私が実行すると、私はを取得ファイルが呼び出されます。
ただし、console.log(Feed)はundefinedと表示されます。 （私がconsole.logのどちらかにReactまたはrenderのいずれかが表示された場合）
インポート/エクスポートなどの方法に問題がありますか？
feed.jsに 'default export'を残し、routes.jsの' ./Feed ';から 'import Feed'に変更してください – azium