Компонент не импортируется в приложение

Я создаю простое приложение 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 и измените на «import Feed from» ./Feed '; 'в routes.js – azium

{Feed} from ... означает, что вы экспортируете переменную Feed, которая является частной в вашем Feed модуле. Вот почему вы получаете undefined при экспорте переменной Feed. Потому что вы уже установили export default Feed, поэтому просто позвоните Feed from .. без фигурных скобок.

источник

2016-03-31 18:29:37

Компонент не импортируется в приложение

ответ

Смежные вопросы