React Component ESLint表示首选默认导出

Question

我一直在我的组件上从ESLint收到此错误。

ESLint：首选默认导出（导入/首选 - 默认导出）

这是组件的外观

export class mycomponent extends React.Component {

  render() {

    //stuff here

  }
}

它要求什么？我该如何解决这个问题？

Answer 1

您需要将导出指定为默认值，如下所示：

export default class mycomponent extends React.Component {

  render() {

    //stuff here

  }
}

（注意添加的单词default），然后在其他文件中，您可以导入组件：

import mycomponent from './mycomponent.js';

假设组件包含在同一目录中，并在mycomponent.js文件中定义。

如果您的文件包含多个具有以下名称的导出内容，您还可以避免使用默认导出：

export const foo = 'foo';
export const bar = 'bar';

或者您甚至可以保留原始文件，而不是单词default，并使用批量导入将其导入：

import * as mycomponent from './mycomponent.js';