导出react.js中的多个模块

react.js的新手和尝试跟随tutorial。不幸的是，页面中给出的代码不起作用。 webpack抱怨导出react.js中的多个模块

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'));

UPDATE1

我评论了所有的export default并在底部添加以下内容

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

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

来源

2017-09-04 packetie

[Multiple React components in a single module]可能重复（https://stackoverflow.com/questions/30762734/multiple-react-components-in-a-single-module） – Chris

@Chris我检出了链接并试图进行一些更改，但仍然无法正常工作，请参阅'update1'部分。谢谢。 – packetie

你只能有一个，你申报喜欢默认的导出：

export default App;后来做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';

编辑：

有教程是一个错误这是不可能做出3德法ult导出在同一个main.js文件中。除此之外，为什么输出任何东西，如果它没有在文件外使用？正确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'))

EDIT2：

另一件事是，这个教程是基于反应路由器-V3具有不同的API比V4。

来源

2017-09-04 15:38:55 Tomasz

感谢您的提示，问题是，我没有在编译器（webpack）中调用'import App'等。有任何想法吗？ – packetie

我不知道，但你为什么会关心它？为了使你的代码能够正常工作，你必须有一个'default export'，而其他的（如果在同一个文件中）必须被命名。 – Tomasz

我对此很新，并试图按照教程。教程中的所有前面部分都很好。任何想法如何使路线工作如图所示？ – packetie

当你

import App from './App.jsx';

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

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

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

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

来源

2017-09-04 15:35:15 iboss

Thx @iboss提示和链接。原来主要的问题是路由器版本不匹配。 – packetie

导出react.js中的多个模块

回答

相关问题