Reagieren Sie auf eslint Fehler, der bei der Requisitenvalidierung fehlt

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,
  }
}

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';

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

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;

Das Problem ist in Flow Annotation in handleClick, ich habe dies entfernt und funktioniert gut, danke @alik

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.

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?