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时，我得到了预期的对象）

我导入/导出或以其他方式使组件可用的方式有问题吗？

Answer 1

{Feed} from ...表示您导出Feed模块中私有的变量Feed。这就是导出undefined变量时获得Feed的原因。因为您已经设置了export default Feed，所以只需在没有大括号的情况下调用Feed from ..。

组件未导入应用程序

1 个答案: