ESLint：在“./TopBar”中找不到 TopBarClass（导入/命名）

Question

我目前正在使用 JSX 构建一个 React 应用程序，并且我从 ESLint 收到以下错误：

ESLint：在“./TopBar”中找不到 TopBarClass（导入/命名）

这是产生错误的文件的外观。

import React from 'react';

import { TopBarClass } from './TopBar';

export default class Game extends React.Component {

  render() {
    const { state } = this.state;
    return (
      <div id="game-inner-container">
        { TopBarClass({ isMobileOrSmall: state.isMobileOrSmall }) }
      </div>
    );
  }

}

但是在我的TopBar.js我有以下内容：

import React from 'react';

export default class TopBarClass extends React.Component {

}

Answer 1

改变

import { TopBarClass } from './TopBar';

到

import TopBarClass from './TopBar';

您正在使用默认导出，因此您应该在没有{ / }情况下导入它

或者您可以将export default更改为仅export ，然后{ / }应与组件的名称匹配。

Answer 2

您需要以正确的方式使用导入，如下所示

import TopBarClass  from './TopBar';

它会正常工作。