2

我创建了一个AppBar组件，我想在组件中导出该App组件。

src/components/appbar.jsx：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import LeftDrawer from './leftDrawer';

const styles = {
  root: {
    flexGrow: 1,
  },
  flex: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
};

class  ButtonAppBar extends React.Component {
  state = {
    left: false,
  }
  toggleDrawer = (side, open) => () => {
    this.setState({
      [side]: open,
    });
  };
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton 
              className={classes.menuButton} 
              color="inherit" 
              aria-label="Menu"
              onClick={this.toggleDrawer('left', true)}
            >
              <MenuIcon />
            </IconButton>
            <LeftDrawer 
              open={this.state.left} 
              toggleDrawer={this.toggleDrawer} 
            />
          </Toolbar>
        </AppBar>
      </div>
    );
  };
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ButtonAppBar);

src/app.jsx：

import React from 'react';
import ButtonAppBar  from './components/appBar';


const App = () => (
  <div>
    <ButtonAppBar />
  </div>
        );

export default App;

.estlinrc.json：

{
"extends": [
    "airbnb", "prettier"
],
"env": {
    "browser": true
},
"rules": {
    "react/forbid-prop-types": "off"
  },
"settings": {
    "import/extensions": [".jsx", ".js"],
    "import/resolver": {
      "webpack": {
        "config": "webpack.config.js"
      }
    }
  } 
}

.babelrc.json：

{
"presets": [
    "env",
    "react"
],
"plugins": ["transform-class-properties"]
}

包.json：

"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"eslint": "^5.4.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.0.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
"prettier": "^1.14.2",
"webpack": "^4.17.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"

}

当我运行指令时：

./node_modules/.bin/eslint --ext .js,.jsx ./

我收到了这个错误：

Parse errors in imported module './components/appBar': Unexpected token = (24:9)  import/no-named-as-default

我在这里找到了一个类似的问题How do I resolve eslint import/no-named-as-default并在接受的答案中禁用了规则import/no-named-as-default。是否有任何解决方案可以保留此规则并更新代码以免出现此错误？

4

1 回答 1

4

似乎您没有使用babel-eslint作为解析器，在您的设置中缺少babel-transform-class-properties插件，或者 eslint 未配置为使用它，或者它是旧版本的 eslint。

希望其中一个是罪魁祸首！

于 2018-08-22T18:03:03.760 回答