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并在末尾添加了以下内容
export default
module.exports = { App: App, Home: Home, About: About, Contact: Contact }
现在没有编译错误,但是网页为空白。我不确定这里出什么问题了。
您只能声明一个默认出口,例如:
export default App; 要么 export default class App extends React.Component {...
export default App;
export default class App extends React.Component {...
然后做 import App from './App'
import App from './App'
如果要导出更多内容,则可以使用 命名的 导出内容,而无需使用default关键字声明即可,例如:
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:
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不同。