Reagieren Sie auf eslint Fehler, der bei der Requisitenvalidierung fehlt

80

Ich habe den nächsten Code, eslint throw:

React / Prop-Typen onClickOut; fehlt in der Requisitenvalidierung

reagieren / Requisitentypen Kinder; fehlt in der Requisitenvalidierung

propTypes wurde definiert, aber eslint erkennt es nicht.

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;

package.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,
  }
}
javascript  reactjs  eslint  flowtype 
— cristian camilo cedeño gallego
quelle
Vielleicht am besten zu schreiben:const { children, onClickOut, ...filteredProps } = this.props;
— Horyd
Verwenden Sie Babel-Eslint?
— Timo
@horyd nicht, wenn ich es tue eslint werfen nicht-unbenutzte-vars onClickOut ist definiert, aber nie verwendet
— Cristian Camilo Cedeño Gallego
versuchen Sie es zu definieren als:static get propTypes() { return { children: PropTypes.any, onClickOut: PropTypes.func }; }
— Omri Aharon
ja @ TimoSta ich benutze babel-eslint
— cristian camilo cedeño gallego

Antworten:

84

Sie müssen propTypeseinen statischen Getter definieren, wenn Sie ihn in der Klassendeklaration verwenden möchten:

static get propTypes() { 
    return { 
        children: PropTypes.any, 
        onClickOut: PropTypes.func 
    }; 
}

Wenn Sie es als Objekt definieren möchten, müssen Sie es außerhalb der Klasse wie folgt definieren:

IxClickOut.propTypes = {
    children: PropTypes.any,
    onClickOut: PropTypes.func,
};

Es ist auch besser, wenn Sie Requisitentypen importieren prop-types, nicht react , da sonst Warnungen in der Konsole angezeigt werden (als Vorbereitung für React 16 ):

import PropTypes from 'prop-types';
— Omri Aharon
quelle
1
Abhängig von der Babel-Konfiguration muss es nicht besser sein, wenn Sie das Plugin für statische Eigenschaften verwenden.
— Dave Newton
Vielen Dank. Die erste Option löst den gleichen Fehler aus, die zweite Option löst das Problem, aber ich verstehe nicht, warum das Definieren als Klassenattribut in diesem Fall einen Fehler auslöst. Hinweis: Ich habe andere Komponenten, die gut funktionieren und als Klassenattribut definiert werden
— Cristian Camilo Cedeño Gallego
1
Ich bin mir nicht sicher, warum einer ausfällt und der andere funktioniert. Ich dachte, es müsste so oder so statisch für eine Klasse definiert werden, vielleicht habe ich mich geirrt.
— Omri Aharon
11

Es scheint, dass das Problem liegt eslint-plugin-react.

Es kann nicht korrekt erkennen, in welchen Requisiten erwähnt wurde, propTypeswenn Sie benannte Objekte durch Destrukturierung an einer beliebigen Stelle in der Klasse mit Anmerkungen versehen haben.

In der Vergangenheit gab es ein ähnliches Problem

— Alik
quelle
Ich benutze Babel-Eslint und aktiviere alle Stufen. Hinweis: Ich habe andere Komponenten, die gut funktionieren und als Klassenattribut definiert werden
— Cristian Camilo Cedeño Gallego
@ cristiancamilocedeñogallego post relevante Konfigurationen : package.json, .eslintrcEs ist schwer zu sagen, warum es nicht propTypes aufnimmt
— Alik
1
Das Problem liegt also in der Flussanmerkung inhandleClick
— Alik
Ja, @alik hat die Flow-Annotation entfernt und funktioniert
— einwandfrei
5

Ich bin in den letzten Tagen auf dieses Problem gestoßen. Wie Omri Aharon in der obigen Antwort sagte, ist es wichtig, Definitionen für Ihre Requisitentypen hinzuzufügen, ähnlich wie:

SomeClass.propTypes = {
    someProp: PropTypes.number,
    onTap: PropTypes.func,
};

Vergessen Sie nicht, die Requisitendefinitionen außerhalb Ihrer Klasse hinzuzufügen. Ich würde es direkt unter / über meiner Klasse platzieren. Wenn Sie nicht sicher sind, welchen Variablentyp oder welches Suffix Sie für Ihren PropType haben (z. B. PropTypes.number), lesen Sie diese npm-Referenz . Um PropTypes verwenden zu können, müssen Sie das Paket importieren:

import PropTypes from 'prop-types';

Wenn Sie den Flusenfehler erhalten: someProp is not required, but has no corresponding defaultProps declarationAlles, was Sie tun müssen, ist entweder .isRequiredam Ende Ihrer Requisitendefinition wie folgt hinzuzufügen :

SomeClass.propTypes = {
    someProp: PropTypes.number.isRequired,
    onTap: PropTypes.func.isRequired,
};

ODER fügen Sie Standard-Requisitenwerte wie folgt hinzu:

SomeClass.defaultProps = {
    someProp: 1
};

Wenn Sie so etwas wie ich sind, unerfahren oder mit Reaktionen nicht vertraut sind, wird möglicherweise auch der folgende Fehler angezeigt : Must use destructuring props assignment. Um diesen Fehler zu beheben, definieren Sie Ihre Requisiten, bevor sie verwendet werden. Zum Beispiel:

const { someProp } = this.props;
— Luftrebe
quelle
2

Problem: 'id1' fehlt in der Requisitenvalidierung, eslintreact / prop-types

<div id={props.id1} >
    ...
</div>

Die folgende Lösung hat in einer Funktionskomponente funktioniert:

let { id1 } = props;

<div id={id1} >
    ...
</div>

Hoffentlich hilft das.

— Manohar Reddy Poreddy
quelle
1

Ich weiß, dass diese Antwort lächerlich ist, aber deaktivieren Sie diese Regel, bis die Fehler behoben sind oder Sie Ihre Werkzeuge aktualisiert haben:

/* eslint-disable react/prop-types */ // TODO: upgrade to latest craco+eslint or Next.js?
— Devin G Rhode
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.