web-dev-qa-db-ja.com

ESLint Prefer default export import / prefer-default-export

こんにちは。私はReact Project。

_Prefer default export import/prefer-default-export_

Helpers.jsエラーが指している：

_export function getItems() {
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({ items: results }));
}
_

関数のインポート：

_import { getItems } from '../helpers/helpers';_

_componentDidMount() {
    getItems.call(this);
}
_

私は役に立たないように試みました：

_"rules": {
     "import/prefer-default-export": off,
     ...
}
_

関数に「デフォルト」を追加する必要がありますか？ export default function getItems() {...}

ありがとうございました

reactjseslintrc
5
roshambo

この警告をオフにするには、コメントを追加できます

/* eslint-disable import/prefer-default-export */

getItemsをエクスポートするファイルの最上部に。

Eslintがここでスタイルの警告を表示しているだけであることに注意してください。将来、同じファイルからより多くの関数をエクスポートするつもりでも、コードに「誤り」はありません。

つまり、ファイルからコードを1ビットだけエクスポートする場合は、export defaultを使用するのが最善の方法です。これにより、コードを別のファイルにインポートする際の構文が向上します。

例

1つだけビットのコードをエクスポートする場合は、export defaultを使用できます。 export default function getItems() {...}を使用すると、インポートはimport getItems from '../myFile';のようになります。 export defaultを使用する利点は、任意の名前を使用してファイルを自由にインポートできることです。例えばimport somethingElse from '../myFile'も問題なく動作します。ファイルの目的が1つだけの場合、この構文は簡潔で明確です。

ただし、getItems()をエクスポートするファイルからmultipleビットのコードをエクスポートする場合（または将来的にエクスポートする場合）、export defaultは使用できません。つまり、エクスポートに使用した名前を使用してインポートする必要があります。ここでの利点は、単一のファイルからコードの複数のビットをエクスポートしてインポートできることです。例えばexport {getItems, getPeople, getPets}およびimport {getItems, getPeople} from '../myFile';

1
Jordan Rolph