组件未导入到应用程序中

Question

我正在设置一个简单的 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 我得到预期的对象时）

我 importing/exporting 或以其他方式使组件可用的方式有问题吗？

Answer 1

{Feed} from ... 表示您导出变量 Feed，它在您的 Feed 模块中是私有的。这就是导出 Feed 变量时得到 undefined 的原因。因为你已经设置了export default Feed，所以直接调用Feed from ..不带大括号。

组件未导入到应用程序中

Component not being imported into app

ecmascript-6

reactjs

react-router