het exporteren van meerdere modules in react.js

Nieuw bij react.js en probeer zelfstudiete volgen. Helaas werkte de code op de pagina niet. webpack klaagde

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

Vraag je af hoe je dit kunt oplossen. Bedankt.

=== 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

Ik heb commentaar gegeven op alle export defaulten heb het volgende aan het einde toegevoegd

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

Er is nu geen compileerfout, maar de webpagina is leeg. Ik weet niet zeker wat hier mis is.


Antwoord 1, autoriteit 100%

U kunt slechts één standaard export hebben die u als volgt declareert:

export default App;
of
export default class App extends React.Component {...

en later import App from './App'

Als u iets meer wilt exporteren, kunt u benoemdeexports gebruiken die u declareert zonder defaulttrefwoord zoals:

export {
  About,
  Contact,
}

of:

export About;
export Contact;

of:

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

en later importeer je ze als:

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

BEWERKEN:

Er zit een fout in de tutorial omdat het niet mogelijk is om 3 standaard exports te maken in hetzelfde main.jsbestand. Anders dan dat, waarom iets exporteren als het niet buiten het bestand wordt gebruikt?. Corrigeer 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:

een ander ding is dat deze tutorial is gebaseerd op react-router-V3 die een andere api heeft dan v4.


Antwoord 2, autoriteit 2%

Als je

import App from './App.jsx';

Dat betekent dat het alles importeert wat je export default. U kunt de klasse Appbinnen App.jsxhernoemen naar wat u maar wilt, zolang u maar export default, het zal werken, maar u kunt maar één export hebben standaard.

Je hoeft dus alleen export default Appte exporteren en de rest niet.

Als je de rest van de componenten nog steeds wilt exporteren, heb je benoemde export nodig.

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


Antwoord 3

Het belangrijkste probleem is dat u meer dan één export default-zoekwoord heeft gebruikt.

Je zou kunnen gebruiken:

export default App
 export {home}
 etc etc 

Other episodes