react.js的新功能并试图遵循
tutorial.不幸的是,页面中给出的代码不起作用. webpack抱怨道
ERROR in ./App.jsx Module build Failed: SyntaxError: Only one default export allowed per module.@H_301_3@不知道如何解决它.谢谢. @H_301_3@=== 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;@H_301_3@=== main.js ===
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>,document.getElementById('app'));@H_301_3@UPDATE1 @H_301_3@我注释掉了所有导出默认值,并在最后添加了以下内容
module.exports = { App: App,Home: Home,About: About,Contact: Contact }@H_301_3@现在没有编译错误,但网页是空白的.我不确定这里有什么问题.
您只能有一个默认导出,您声明如下:
@H_301_3@导出默认App;
要么
export default class App扩展了React.Component {… @H_301_3@然后从’./App’导入App @H_301_3@如果您想要导出更多内容,可以使用您声明的名称导出而不使用默认关键字:
要么
export default class App扩展了React.Component {… @H_301_3@然后从’./App’导入App @H_301_3@如果您想要导出更多内容,可以使用您声明的名称导出而不使用默认关键字:
export { About,Contact,}@H_301_3@要么:
export About; export Contact;@H_301_3@要么:
export const About = class About extends React.Component {.... export const Contact = () => (<div> ... </div>);@H_301_3@然后你导入它们像:
import App,{ About,Contact } from './App';@H_301_3@编辑: @H_301_3@本教程中有一个错误,因为无法在同一个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'))@H_301_3@EDIT2: @H_301_3@另一件事是本教程基于react-router-V3,它具有与v4不同的api.