Réagir eslint erreur manquant dans les accessoires de validation
J'ai donc le code suivant, eslint jeter:
réagir/prop-types onClickOut; manque dans les accessoires de validation
réagir/prop-types des enfants; manque dans les accessoires de validation
propTypes
a été défini, mais eslint ne le reconnaît pas.
import React, { Component, PropTypes } from 'react';
class IxClickOut extends Component {
static propTypes = {
children: PropTypes.any,
onClickOut: PropTypes.func,
};
componentDidMount() {
document.getElementById('app')
.addEventListener('click', this.handleClick);
}
componentWillUnmount() {
document.getElementById('app')
.removeEventListener('click', this.handleClick);
}
handleClick = ({ target }: { target: EventTarget }) => {
if (!this.containerRef.contains(target)) {
this.props.onClickOut();
}
};
containerRef: HTMLElement;
render() {
const { children, ...rest } = this.props;
const filteredProps = _.omit(rest, 'onClickOut');
return (
<div
{...filteredProps}
ref={container => {
this.containerRef = container;
}}
>
{children}
</div>
);
}
}
export default IxClickOut;
paquet.json
{
"name": "verinmueblesmeteor",
"private": true,
"scripts": {
"start": "meteor run",
"ios": "NODE_ENV=developement meteor run ios"
},
"dependencies": {
"fine-uploader": "^5.10.1",
"foundation-sites": "^6.2.3",
"install": "^0.8.1",
"ix-gm-polygon": "^1.0.11",
"ix-type-building": "^1.4.4",
"ix-type-offer": "^1.0.10",
"ix-utils": "^1.3.7",
"keymirror": "^0.1.1",
"meteor-node-stubs": "^0.2.3",
"moment": "^2.13.0",
"npm": "^3.10.3",
"rc-slider": "^3.7.3",
"react": "^15.1.0",
"react-addons-pure-render-mixin": "^15.1.0",
"react-dom": "^15.1.0",
"react-fileupload": "^2.2.0",
"react-list": "^0.7.18",
"react-modal": "^1.4.0",
"react-redux": "^4.4.5",
"react-router": "^2.6.0",
"react-styleable": "^2.2.4",
"react-textarea-autosize": "^4.0.4",
"redux": "^3.5.2",
"redux-form": "^5.3.1",
"redux-thunk": "^2.1.0",
"rxjs": "^5.0.0-beta.9",
"rxjs-es": "^5.0.0-beta.9",
"socket.io": "^1.4.8"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-eslint": "^6.0.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"core-js": "^2.0.0",
"cssnano": "^3.7.1",
"eslint": "^2.12.0",
"eslint-config-airbnb": "^9.0.1",
"eslint-import-resolver-meteor": "^0.2.3",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.2.2",
"eslint-plugin-react": "^5.1.1",
"node-sass": "^3.8.0",
"postcss-cssnext": "^2.6.0",
"sasslets-animate": "0.0.4"
},
"cssModules": {
"ignorePaths": [
"node_modules"
],
"jsClassNamingConvention": {
"camelCase": true
},
"extensions": [
"scss",
"sass"
],
"postcssPlugins": {
"postcss-modules-values": {},
"postcss-modules-local-by-default": {},
"postcss-modules-extract-imports": {},
"postcss-modules-scope": {},
"autoprefixer": {}
}
}
}
.babelrc
{
"presets": [
"es2015",
"react",
"stage-0"
],
"whitelist": [
"es7.decorators",
"es7.classProperties",
"es7.exportExtensions",
"es7.comprehensions",
"es6.modules"
],
"plugins": ["transform-decorators-legacy"]
}
.eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb",
"rules": {
"no-underscore-dangle": ["error", { "allow": [_id, b_codes_id] }],
},
"settings": {
"import/resolver": "meteor"
},
"globals": {
"_": true,
"CSSModule": true,
"Streamy": true,
"ReactClass": true,
"SyntheticKeyboardEvent": true,
}
}
Peut-être mieux écrire:
Êtes-vous à l'aide de babel-eslint?
non, si je le fais eslint jeter aucune-inutilisée-vars onClickOut est défini, mais jamais utilisé
essayez de le définir comme:
oui @TimoSta j'utilise babel-eslint
const { children, onClickOut, ...filteredProps } = this.props;
Êtes-vous à l'aide de babel-eslint?
non, si je le fais eslint jeter aucune-inutilisée-vars onClickOut est défini, mais jamais utilisé
essayez de le définir comme:
static get propTypes() { return { children: PropTypes.any, onClickOut: PropTypes.func }; }
oui @TimoSta j'utilise babel-eslint
OriginalL'auteur cristian camilo cedeño gallego | 2016-07-31
Vous devez vous connecter pour publier un commentaire.
Vous devez définir
propTypes
statique de lecture si vous le souhaitez à l'intérieur de la déclaration de la classe:Si vous souhaitez définir comme un objet, vous devez le définir en dehors de la classe, comme ceci:
Aussi que c'est mieux si vous importez des prop types de
prop-types
, pasreact
, sinon, vous allez voir mises en garde dans la console (en tant que préparation pour Réagir 16):Merci. La première option lancer la même erreur, la deuxième option de résoudre le problème, mais je n'ai pas understend pourquoi la définition de la classe de l'attribut renvoie une erreur dans ce cas. Remarque: j'ai une autre composants qui fonctionnent bien définir comme un attribut de classe
Je ne sais pas pourquoi on échoue et l'autre travaille. J'ai pensé qu'il devait être définie de manière statique sur une classe de toute façon, j'avais peut-être tort.
OriginalL'auteur
Il semble que le problème est dans
eslint-plugin-réagir
.Il ne peut pas détecter correctement ce que les accessoires ont été mentionnés dans
propTypes
si vous avez annoté des objets nommés par déstructuration n'importe où dans la classe.Il y avait problème similaire dans le passé
post pertinentes configs:
package.json
,.eslintrc
Il est difficile de dire pourquoi il ne ramasse pas de propTypesa été édité à la question
donc, le problème est dans le flux d'annotation dans
handleClick
oui @alik, c'était de retirer le flux d'annotation et fonctionne très bien
OriginalL'auteur
le problème est dans le flux d'annotation dans handleClick, j'ai enlevé ce et fonctionne très bien
merci @alik
OriginalL'auteur