reactjs – 在react.js中导出多个模块

发布时间：2020-12-15 20:48:29 所属栏目：百科来源：网络整理

导读：react.js的新功能并试图遵循 tutorial.不幸的是,页面中给出的代码不起作用. webpack抱怨道 ERROR in ./App.jsxModule build failed: SyntaxError: Only one default export allowed per module. 不知道如何解决它.谢谢. === App.jsx ==== import React from

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

我注释掉了所有导出默认值,并在最后添加了以下内容

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

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

您只能有一个默认导出,您声明如下：

导出默认App;
要么
export default class App扩展了React.Component {…

然后从’./App’导入App

如果您想要导出更多内容,可以使用您声明的名称导出而不使用默认关键字：

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,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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!