내보내기, react.module의 여러 모듈

내보내기, react.module의 여러 모듈

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

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
}

이것으로 컴파일 에러는 발생하지 않지만, Web 페이지는 공백이 됩니다.여기 뭐가 잘못됐는지 모르겠어요.

다음과 같이 선언할 수 있는 기본 내보내기는 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합니다.

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

편집:

3개의 기본 내보내기를 동시에 수행할 수 없으므로 튜토리얼에 오류가 있습니다.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'))

편집 2:

또, 이 튜토리얼은 v4와는 다른 api를 가지는 react-router-V3에 근거하고 있습니다.

언제

import App from './App.jsx';

즉, 어떤 것이든 Import 할 수 있습니다.export default. 이름을 변경할 수 있습니다.App내부 클래스App.jsx당신이 원하는 모든 것을 할 수 있는 한export default이 기능은 동작하지만 내보내기 기본값은 1개뿐입니다.

그래서 당신은 단지export default App나머지는 수출할 필요가 없습니다.

나머지 구성 요소를 내보내려면 명명된 내보내기가 필요합니다.

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

주요 문제는 두 개 이상 사용했다는 것입니다.export default키워드를 지정합니다.

다음을 사용할 수 있습니다.

 export default App
 export {home}
 etc etc 

언급URL : https://stackoverflow.com/questions/46039976/exporting-multiple-modules-in-react-js