Reagieren Sie auf den Eslint-Fehler, der in der Props-Validierung fehlt

Lesezeit: 6 Minuten

Benutzer-Avatar
cristian camilo cedeño gallego

Ich habe den nächsten Code, eslint throw:

reagieren/prop-types onClickOut; fehlt in der Props-Validierung

reaktive/propartige Kinder; fehlt in der Props-Validierung

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;

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

  • Vielleicht am besten schreiben: const { children, onClickOut, ...filteredProps } = this.props;

    – hord

    31. Juli 2016 um 14:23 Uhr

  • Benutzt du babel-eslint?

    – TimoStaudinger

    31. Juli 2016 um 14:24 Uhr

  • @horyd nicht, wenn ich es mache eslint throw no-unused-vars onClickOut ist definiert, wird aber nie verwendet

    – cristian camilo cedeño gallego

    31. Juli 2016 um 14:25 Uhr


  • versuche es mal so zu definieren: static get propTypes() { return { children: PropTypes.any, onClickOut: PropTypes.func }; }

    – Omri Aharon

    31. Juli 2016 um 14:26 Uhr

  • ja @TimoSta ich benutze babel-eslint

    – cristian camilo cedeño gallego

    31. Juli 2016 um 14:48 Uhr

Benutzer-Avatar
Omri Aharon

Sie müssen definieren propTypes als statischer Getter, wenn Sie es in der Klassendeklaration haben möchten:

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

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

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

Außerdem ist es besser, wenn Sie Prop-Typen aus importieren prop-types, nicht reactandernfalls sehen Sie Warnungen in der Konsole (als Vorbereitung für Reaktion 16):

import PropTypes from 'prop-types';

  • Hängt von der Babel-Konfiguration ab, es muss nicht besser sein, wenn Sie das Plugin für statische Eigenschaften verwenden.

    – David Newton

    31. Juli 2016 um 14:42 Uhr

  • Vielen Dank. Die erste Option löst den gleichen Fehler aus, die zweite Option löst das Problem, aber ich verstehe nicht, warum die Definition 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

    31. Juli 2016 um 14:46 Uhr

  • 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

    31. Juli 2016 um 14:47 Uhr

Benutzer-Avatar
Devin Rhode

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

/* eslint-disable react/prop-types */ // TODO: upgrade to latest eslint tooling

Oder deaktivieren Sie projektweit in Ihrem eslintrc:

"rules": {
  "react/prop-types": "off"
}

  • Die eigentliche Syntax zum Deaktivieren dieser Regel lautet: “react/prop-types”: “off”

    – Ken A. Collins

    21. Dezember 2020 um 15:37 Uhr

  • Danke, das habe ich auch in eslintrc im Regelabschnitt verwendet

    – iBobb

    22. Dezember 2020 um 16:18 Uhr

  • Meiner Meinung nach ist dies eine schlechte Vorgehensweise und sollte Entwicklern nicht empfohlen werden. Das Deaktivieren von Regeln kann Sie durch das Schreiben von schlechtem Code in Kaninchenlöcher führen. (d. h. Regeln deaktivieren, wann immer es bequemer erscheint.)

    – Luftranke

    28. Januar 2021 um 20:54 Uhr

Benutzer-Avatar
Konstantin

Das Problem scheint da zu sein eslint-plugin-react.

Es kann nicht richtig erkennen, welche Requisiten erwähnt wurden propTypes wenn Sie benannte Objekte durch Destrukturierung irgendwo in der Klasse kommentiert haben.

Dort war ähnliches Problem in der Vergangenheit

  • Ich verwende babel-eslint und aktiviere alle Stufen Hinweis: Ich habe eine andere Komponente, die gut funktioniert und als Klassenattribut definiert wird

    – cristian camilo cedeño gallego

    31. Juli 2016 um 14:49 Uhr


  • @cristiancamilocedeñogallego poste relevante Konfigurationen: package.json, .eslintrc Es ist schwer zu sagen, warum es keine propTypes aufnimmt

    – Konstantin

    31. Juli 2016 um 14:53 Uhr

  • Das Problem liegt also in der Flussanmerkung in handleClick

    – Konstantin

    31. Juli 2016 um 15:13 Uhr

  • ja @alik hat die Flussanmerkung entfernt und funktioniert gut

    – cristian camilo cedeño gallego

    31. Juli 2016 um 15:40 Uhr

Benutzer-Avatar
Luftranke

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

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

Vergessen Sie nicht, die Prop-Definitionen außerhalb Ihrer Klasse hinzuzufügen. Ich würde es direkt unter / über meiner Klasse platzieren. Wenn Sie sich nicht sicher sind, was Ihr Variablentyp oder Suffix für Ihren PropType ist (z. B.: PropTypes.number), lesen Sie dies npm-Referenz. Um PropTypes zu verwenden, müssen Sie das Paket importieren:

import PropTypes from 'prop-types';

Wenn Sie den Linting-Fehler erhalten:someProp is not required, but has no corresponding defaultProps declaration alles, was Sie tun müssen, ist entweder hinzuzufügen .isRequired bis zum Ende Ihrer Prop-Definition wie folgt:

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

ODER fügen Sie standardmäßige Prop-Werte wie folgt hinzu:

SomeClass.defaultProps = {
    someProp: 1
};

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

const { someProp } = this.props;

Für mich Upgrade eslint-plugin-reagieren bis zur neusten Version 7.21.5 wurde dies behoben

Benutzer-Avatar
Vaishnavi Aswale

Installieren Sie das Prop-Types-Paket mit npm i prop-types --save
Importiere es-

import PropTypes from 'prop-types';

Geben Sie dann die Requisiten an, die ich auf diese Weise implementiert habe.

export default function Text({ children }) {
    Text.propTypes = {
        children: PropTypes.node.isRequired,
        };
  return (
    <VStyle className="para">
      <p>{children}</p>
    </VStyle> 
  );
}

Fügen Sie dies auch in Ihrer eslintrc.json- oder .js-Datei hinzu

"rules": {
    "react/prop-types": "off"
  }

Benutzer-Avatar
benjdan

In der neuen Version von React und auch Next.js können Sie PropTypes einfach wie folgt importieren:

import PropTypes from "prop-types";

und fügen Sie am Ende Ihrer Datei defaultProps und propTypes hinzu, wie z.

Post.defaultProps = {
  posts: "",
};

Post.propTypes = {
  posts: PropTypes.string,
};

export default Post;

Es sollte Ihre Eslint-Warnungen auflösen.

1283080cookie-checkReagieren Sie auf den Eslint-Fehler, der in der Props-Validierung fehlt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy