[英]Prefer default export eslint error
I am getting this eslint error:我收到这个 eslint 错误:
Prefer default export
首选默认导出
import React, { Component } from 'react';
class HomePage extends Component {
render() {
return (
<div className="Section">HomePage</div>
);
}
}
export { HomePage };
I have tried doing: export { default as Homepage };
我试过这样做:
export { default as Homepage };
and then I get a fatal parsing error.然后我得到一个致命的解析错误。
Then I changed it to:然后我把它改成了:
export default HomePage;
Which clears the eslint error.这清除了 eslint 错误。
But then throws:但随后抛出:
'./HomePage' does not contain an export named 'HomePage'.
“./HomePage”不包含名为“HomePage”的导出。
Because I am calling HomePage like this: import { HomePage } from './HomePage';
因为我这样调用 HomePage:
import { HomePage } from './HomePage';
If I remove the brackets then I get this error:如果我删除括号,则会收到此错误:
"export 'default' (imported as 'HomePage') was not found in './HomePage'
“在 './HomePage' 中找不到导出 'default'(导入为 'HomePage')
import HomePage from './HomePage';
<PrivateRoute exact path="/" component={HomePage} />
What would be the proper way of changing this to the preferred default export?将其更改为首选默认导出的正确方法是什么?
From eslint-plugin-import
来自
eslint-plugin-import
When there is only a single export from a module, prefer using default export over named export.
当模块只有一个导出时,更喜欢使用默认导出而不是命名导出。
class HomePage extends Component {
//....
}
export default HomePage
In another file :在另一个文件中:
import HomePage from './Hello';
Check here codesandbox
在这里检查
codesandbox
Here's an example using functions:下面是一个使用函数的例子:
function HomePage() {
function aHelperMethod() {
//
}
return {
aHelperMethod,
}
}
Now to import it in another file现在将其导入另一个文件
import HomePage from './Hello';
And to use it you'll have to instantiate it要使用它,您必须实例化它
const homePage = HomePage()
homePage.aHelperFunction()
In some cases there should be more than one named export in the module.在某些情况下,模块中应该有多个命名导出。
export const foo = 'foo';
export const bar = 'bar';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.