在react.js中导出多个模块

小编典典

在react.js中导出多个模块

reactjs

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
}

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

阅读 366

2020-07-22

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

编辑2：

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

2020-07-22