組件未被導入到應用程序中

我設置了一個簡單的React應用程序，默認情況下，該應用程序呈現項目提要，並且使用react-router可以提取類似的列表。問題是我似乎無法導入與路由配對的組件。組件未被導入到應用程序中

的Index.html

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

在的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};

當我跑，我得routes.js fired因此文件正在被調用。但是，console.log(Feed)顯示undefined。（當我console.log要麼React或render我得到預期的對象）

我有導入/導出或以其他方式使組件可用的方式有什麼問題嗎？

來源

2016-03-31 zahabba

保留feed.js中的'default export'並更改爲'從./Feed'導入Feed';'routes.js中 – azium

{Feed} from ...意味着您導出Feed模塊中私有的變量Feed。這就是爲什麼當你輸出Feed變量時你得到undefined。因爲您已經設置了export default Feed，所以只需撥打Feed from ..而不使用大括號。

來源

2016-03-31 18:29:37

組件未被導入到應用程序中

回答

相關問題