Question

react.js的新手并尝试关注tutorial。不幸的是，页面中给出的代码不起作用。 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'));

UPDATE1

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

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

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

Answer 1

您只能声明一个默认导出：

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

<强> EDIT2：

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

Answer 2

当你

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

在react.js中导出多个模块

2 个答案: