在 react.js 中导出多个module

IT技术 reactjs
2021-04-12 16:39:43

react.js 的新手并尝试遵循教程。不幸的是，页面中给出的代码不起作用。webpack 抱怨

ERROR in ./App.jsx
Module build failed: SyntaxError: Only one default export allowed per module.

想知道如何修复它。谢谢。

=== App.jsx====

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
               <li><Link to = "/home">Home</Link></li>
               <li><Link to = "/about">About</Link></li>
               <li><Link to = "/contact">Contact</Link></li>
            </ul>

           {this.props.children}
         </div>
      )
   }
}

export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}

export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}

export default Contact;

=== main.js ===

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

更新1

我注释掉了所有export default并在最后添加了以下内容

module.exports = {
    App: App,
    Home: Home,
    About: About,
    Contact: Contact
}

现在没有编译错误但网页是空白的。我不确定这里有什么问题。

3个回答

您只能有一个您声明的默认导出，例如：

export default App; 或者 export default class App extends React.Component {...

然后做 import App from './App'

如果您想导出更多内容，您可以使用不带关键字声明的命名导出，default例如：

export {
  About,
  Contact,
}

或者：

export About;
export Contact;

或者： 

export const About = class About extends React.Component {....
export const Contact = () => (<div> ... </div>);

然后你像这样导入它们：

import App, { About, Contact } from './App';

编辑：

教程中有一个错误，因为不可能在同一个main.js文件中进行 3 个默认导出。除此之外，如果在文件之外没有使用任何东西，为什么要导出它？。正确main.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class App extends React.Component {
...
}

class Home extends React.Component {
...
}


class About extends React.Component {
...
}


class Contact extends React.Component {
...
}


ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>

), document.getElementById('app'))

编辑2：

另一件事是本教程基于 react-router-V3，它的 api 与 v4 不同。

我对此很陌生，并试图按照教程进行操作。本教程前面的所有部分都很好。知道如何使路线如图所示工作吗？
2021-05-23 16:39:43
感谢您的提示，问题是，我没有在import App编译器（webpack）中调用 etc。有任何想法吗？
2021-06-10 16:39:43
我不知道，但你为什么要担心呢？为了使您的代码工作，您必须default export命名一个，其他（如果在同一个文件中）必须命名。
2021-06-16 16:39:43
将 Home、About、Contact 部分移动到它们的 .jsx 文件中。没有看到编译错误，但网页是空白的。有任何想法吗？
2021-06-17 16:39:43
我相信教程中有错误，因为不可能在同一个main.js文件中进行 3 个默认导出。请首先将每个组件类移动到不同的文件，如Contact.jsx等，并在每个文件中生成export default Contact;等。
2021-06-19 16:39:43

当你

import App from './App.jsx';

这意味着它会导入你的任何东西export default。您可以将App里面的类重命名App.jsx为您想要的任何名称，只要export default它可以工作，但您只能有一个导出默认值。

所以你只需要export default App，你不需要导出其余的。

如果您仍想导出其余的组件，则需要命名导出。

https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

谢谢@iboss 的提示和链接。原来主要问题是路由器上的版本不匹配。
2021-05-28 16:39:43

主要问题是您使用了多个export default关键字。

你可以使用：

 export default App
 export {home}
 etc etc
其它你可能感兴趣的问题
上一篇将对象存储在 React 组件的状态？ 下一篇如何在 react-router 中为 Link 或 IndexLink 的包装元素设置 activeClassName？