Comment puis-je résoudre eslint importation/non-nommé en tant que par défaut

Après avoir regardé la documentation pour l'importation/non-nommé en tant que par défaut eslint la règle, je suis toujours confus au sujet de exactement ce que je fais mal.

Je avoir la structure suivante

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

La ButtonBack.jsx contient le code suivant

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

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

__les tests__/ButtonBack.test.jsx contient le code suivant

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

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

Le problème c'est que mon linter dit que import ButtonBack from '../ButtonBack viole les suivantes de peluches règles:

Je ne peux pas comprendre pourquoi mon instruction d'importation viole les peluches de la règle. Supprimant le nom de la classe dans ButtonBack.jsx (export default class extends React.Component) ne résout pas le problème non plus.

Existe-il d'autres exports dans ButtonBack.jsx, ou tout simplement de la export default class ButtonBack?
Juste l'un à l'exportation.
avez-vous une solution sur ce ou avez-vous simplement désactiver la règle?
J'ai juste désactivé la règle. 😐

InformationsquelleAutor mrbinky3000 | 2017-06-08

24

Couru dans cette même question, et à partir de ce que je vois, vous allez juste de désactiver la règle (c'est ce que j'ai fait au moins)

"Malheureusement, Réagissent + Redux est le scénario le plus courant. Cependant, il y a beaucoup d'autres cas où des HOCs va forcer les développeurs à l'arrêt de la présente règle."

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
}
```
InformationsquelleAutor Gregory Nowakowski
10

Couru dans cette question parce que je suis en utilisant React + Redux:
```
export class ButtonBack extends React.Component {
  //code removed
}
export default connect(null, null)(ButtonBack);
```
Donc, avec le code ci-dessus, cela va me donner un avertissement:
```
import ButtonBack from ./ButtonBack;
```
changer à la suite résout le problème:
```
import ConnectedButtonBack from ./ButtonBack;
```
Pas l'exportation de class ButtonBack permettrait également de résoudre le problème, mais je tiens à les exporter pour les aider à tester.

Source: http://redux.js.org/docs/recipes/WritingTests.html#connected-components

Edit:

Mon préféré la solution de ce problème consiste à ont des fichiers séparés pour les composants et conteneurs. Je pense que cela permet de maintenir des fichiers plus petits et plus faciles à comprendre.
Dans ce cas, je voudrais avoir deux fichiers:
```
components/ButtonBack.js
containers/ButtonBackContainer.js
```
- Cette solution fonctionne très bien !
- une autre solution serait " importer { ButtonBack } à partir de ./ButtonBack; " je préfère cette solution si je veux garder le même nom de composant dans l'importation aussi.
- si vous utilisez redux, ce n'est pas une solution. import { ButtonBack } from ./ButtonBack; et import ConnectedButtonBack from ./ButtonBack; sont deux choses différentes. L'une est la plaine de la composante et l'autre est le composant connecté.
InformationsquelleAutor Doug
4

Problème Original ligne :
```
import ButtonBack from '../ButtonBack'; 
```
Ligne Fixe:
```
import { ButtonBack } from '../ButtonBack'; 
```
- Tandis que ceci peut fonctionner dans le cas général, vous devez être prudent si vous utilisez réagir/redux, et donc d'emballage de votre réagissent composant dans le connect()(yourCompnent) méthode de redux. Si vous enroulez l'exportation dans des accolades, vous ne pourrez pas exporter le composant connecté.
- la réponse est facile, mais je ne sais pas ce qu'il fixe, depuis mon exportation a été par défaut
InformationsquelleAutor sathishkumar
2

C'est assez stupide pour esLint mais ce que j'ai fait pour le résoudre, il était de vérifier le fichier qui est de l'exportation, par accident, j'ai eu l'exportation de la classe puis à l'exportation par défaut connecter. Avait encore des peluches d'erreur, re écrit à l'importation de ligne du parent et eslint effacé avertissement.

InformationsquelleAutor Shawn Sheehan
0

Vous pouvez tout aussi bien utiliser un alias à l'exportation et à l'opposé de l'alias à l'importation

InformationsquelleAutor fedeghe
0

J'ai eu le même problème lorsque j'ai importé des composants de classe et c'était une solution simple à la fin.

Solution

Juste ajouter
```
"parser": "babel-eslint"
```
à votre eslintrc fichier de configuration après avoir installé ce package avec
```
npm install babel-eslint --save-dev
```
ou
```
yarn add babel-eslint --dev
```
Explication

babel-eslint dit eslint à l'utilisation de la configuration spécifiée dans mon Babel fichier de configuration. Là, j'ai précisé que j'utilise Réagir et c'est pourquoi eslint ne s'en plaindra pas plus. C'est ainsi que ma Babel fichier de configuration ressemble à:
```
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}
```
InformationsquelleAutor KevinH

Vous devez vous connecter pour publier un commentaire.

Edit:

Solution

Explication