javascript - 如何解决 eslint import/no-named-as-default

Question

查看 import/no-named-as-default eslint 规则的文档后，我仍然对我到底做错了什么感到困惑。

我有以下文件结构

.
├── ButtonBack.css
├── ButtonBack.jsx
├── __tests__
│   └── ButtonBack.test.jsx
└── index.js

ButtonBack.jsx 包含以下代码

import React from 'react';
import PropTypes from 'prop-types';

export default class ButtonBack extends React.Component {
  ... code removed to keep example short ...
}

__tests__/ButtonBack.test.jsx 包含以下代码

import React from 'react';
import { shallow } from 'enzyme';
import ButtonBack from '../ButtonBack'; // <== this line has an eslint warning

... code removed to keep example short ...

问题是，我的 linter 说 import ButtonBack from '../ButtonBack 违反了以下 lint 规则:

• import/no-named-as-default
• import/no-named-as-default-member

我不明白为什么我的 import 语句违反了 lint 规则。删除 ButtonBack.jsx 中的类名称(export default class extends React.Component)也不能解决问题。

Answer 1

遇到了同样的问题，据我所知，您只需禁用该规则(至少我就是这么做的)

“不幸的是，React + Redux 是最常见的场景。但是，在很多其他情况下 HOC 会迫使开发人员关闭此规则。”

https://github.com/benmosher/eslint-plugin-import/issues/544

https://github.com/reactjs/react-redux/issues/119

https://github.com/18F/calc/pull/1235

.eslintrc

"rules": {
    "import/no-named-as-default": 0
}