在 react.js 中导出多个模块
[英] exporting multiple modules in react.js
本文介绍了在 react.js 中导出多个模块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
刚接触 react.js 并尝试遵循 教程.不幸的是,页面中给出的代码不起作用.webpack 抱怨了
./App.jsx 中的错误模块构建失败:语法错误:每个模块只允许一个默认导出.
想知道如何修复它.谢谢.
=== App.jsx====
从'react'导入React;从 'react-dom' 导入 ReactDOM;import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'类 App 扩展了 React.Component {使成为() {返回 (<div><ul><li><Link to = "/home">Home</Link></li><li><Link to = "/about">About</Link></li><li><Link to = "/contact">联系方式</Link></li>{this.props.children}
)}}导出默认应用程序;class Home 扩展 React.Component {使成为() {返回 (<div><h1>首页...</h1>
)}}导出默认首页;class 关于扩展 React.Component {使成为() {返回 (<div><h1>关于...</h1>
)}}导出默认关于;class Contact 扩展 React.Component {使成为() {返回 (<div><h1>联系...</h1>
)}}导出默认联系人;
=== main.js ===
从'react'导入React;从 'react-dom' 导入 ReactDOM;从'./App.jsx'导入应用程序;ReactDOM.render(, document.getElementById('app'));
更新1
我注释掉了所有的export default
并在最后添加了以下内容
module.exports = {应用程序:应用程序,家:家,关于:关于,联系方式:联系方式}
现在没有编译错误但是网页是空白的.我不确定这里出了什么问题.
解决方案
你只能有一个你声明的默认导出:
导出默认应用;
或者export default class App extends React.Component {...
然后做 import App from './App'
如果你想导出更多的东西,你可以使用 named 导出,你声明它没有 default
关键字,例如:
export {关于,接触,}
或:
export 关于;出口联系方式;
或:
export const About = class About extends React.Component {....export const Contact = () =>(<div> ... </div>);
然后你像这样导入它们:
import App, { About, Contact } from './App';
教程中有一个错误,因为不可能在同一个 main.js
文件中进行 3 个默认导出.除此之外,如果在文件之外没有使用任何东西,为什么要导出任何东西?.正确的 main.js
:
从'react'导入React;从 'react-dom' 导入 ReactDOM;import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'类 App 扩展了 React.Component {...}class Home 扩展 React.Component {...}class 关于扩展 React.Component {...}class Contact 扩展 React.Component {...}ReactDOM.render((<路由器历史记录 = {browserHistory}><路由路径=/"组件={App}><IndexRoute 组件 = {Home}/><Route path = "home" component = {Home}/><路由路径=关于"组件={关于}/><路由路径=联系方式"组件={联系方式}/></路线></路由器>), document.getElementById('app'))
另一件事是本教程基于 react-router-V3,它具有与 v4 不同的 api.
New to react.js and trying to following tutorial. Unfortunately the code given in the page didn't work. webpack complained
ERROR in ./App.jsx
Module build failed: SyntaxError: Only one default export allowed per module.
Wonder how to fix it. Thanks.
=== 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
I commented out all the export default
and added the following at the end
module.exports = {
App: App,
Home: Home,
About: About,
Contact: Contact
}
Now there is no compile error but the web page is a blank. I am not sure what is wrong here.
解决方案
You can have only one default export which you declare like:
export default App;
or
export default class App extends React.Component {...
and later do import App from './App'
If you want to export something more you can use named exports which you declare without default
keyword like:
export {
About,
Contact,
}
or:
export About;
export Contact;
or:
export const About = class About extends React.Component {....
export const Contact = () => (<div> ... </div>);
and later you import them like:
import App, { About, Contact } from './App';
EDIT:
There is a mistake in the tutorial as it is not possible to make 3 default exports in the same main.js
file. Other than that why export anything if it is no used outside the file?. Correct 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:
another thing is that this tutorial is based on react-router-V3 which has different api than v4.
这篇关于在 react.js 中导出多个模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!