我正在学习一门课程,作者以以下方式导出了一个组件:export MainContainer from './Main/MainContainer'
默认的正确方法是export { default as MainContainer } from './Main/MainContainer'
,它不是那么干净。作者可以使用babel-eslint软件包来执行此操作,但是在我安装了该软件包之后,仍然出现lint错误。
Repo link
文件结构:
预期
在container / index.js中使用export MainContainer from './Main/MainContainer'
时,没有ESlint错误。该导出语句应允许config / routes.js导入MainContainer,如下所示:import { MainContainer } from '../containers'
结果
ESlint错误:
container / Main / MainContainer.js
import React from 'react'
export default class MainContainer extends React.Component {
render () {
return (
<p>Hello World</p>
)
}
}
容器/ index.js
export MainContainer from './Main/MainContainer'
// export { default as MainContainer } from './Main/MainContainer'
config / routes.js
import ReactDom from 'react-dom'
import routes from './config/routes'
ReactDom.render(
routes,
document.getElementById('app')
)
我安装了以下软件包:
"devDependencies": {
"babel-core": "^6.25.0",
"babel-eslint": "^8.0.0-alpha.15",
"babel-loader": "^7.1.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"css-loader": "^0.28.4",
"eslint": "^4.2.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.1.0",
"eslint-plugin-standard": "^3.0.1",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1"
}
npm run lint脚本:
"lint": "eslint app/.; exit 0",
.babelrc
{
presets: [
'react',
'es2015',
'stage-0',
'stage-1'
],
"plugins": ["transform-export-extensions"]
}
.eslintrc
{
parser: "babel-eslint",
env: {
es6: true,
browser: true
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
ecmaFeatures: {
jsx: true,
experimentalObjectRestSpread: true
}
},
plugins: [
"react",
],
extends: ["eslint:recommended", "plugin:react/recommended", "standard"],
"rules": {
"no-console": [2, {allow: ["warn", "error"]}],
"comma-dangle" : [2, "always-multiline"],
"semi": [2, "never"],
"no-extra-semi": 2,
"jsx-quotes": [2, "prefer-single"],
"react/jsx-boolean-value": [2, "always"],
"react/jsx-closing-bracket-location": [2, {selfClosing: "after-props", nonEmpty: "after-props"}],
"react/jsx-curly-spacing": [2, "never", {"allowMultiline": false}],
"react/jsx-max-props-per-line": [2, {maximum: 3}],
"react/jsx-no-literals": 2,
"react/self-closing-comp": 2,
"react/sort-comp": 2
}
}
最佳答案
默认的正确方法是从'./Main/MainContainer'导出{默认为MainContainer}
您从哪里获得这些信息?根据MDN Documentation,您可以:
export { MainContainer as default } from './Main/MainContainer'
要么
export default MainContainer from './Main/MainContainer'