प्रॉम्प्स सत्यापन में अनुपस्थित त्रुटि प्रतिक्रिया

Question

मेरे पास अगला कोड है, एस्क्लिंट थ्रो:

प्रतिक्रिया / प्रो-प्रकार onClickOut; सहारा सत्यापन में गायब है

प्रतिक्रिया / बच्चों के प्रकार; सहारा सत्यापन में गायब है

propTypes परिभाषित किया गया था, लेकिन गूढ़ व्यक्ति इसे नहीं पहचानता है।

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

Comments

शायद सबसे अच्छा लिखने के लिए:const { children, onClickOut, ...filteredProps } = this.props;

— horyd

क्या आप बेबल-एस्लिन्ट का उपयोग कर रहे हैं?

— टीमो

@ जोर से नहीं, अगर मैं इसे नहीं फेंकता हूं, तो अप्रयुक्त-vars onClickOut को परिभाषित नहीं किया जाता है, लेकिन कभी भी इस्तेमाल नहीं किया जाता है

— गैलेगो

इसे इस रूप में परिभाषित करने का प्रयास करें:static get propTypes() { return { children: PropTypes.any, onClickOut: PropTypes.func }; }

— ओमरी अहरोन

हां @TimoSta मैं बबेल-एस्लिन्ट का उपयोग करता हूं

— गैलेगो

Answer 1

propTypesयदि आप इसे कक्षा घोषणा के अंदर चाहते हैं, तो आपको एक स्थिर गटर के रूप में परिभाषित करने की आवश्यकता है :

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

यदि आप इसे एक वस्तु के रूप में परिभाषित करना चाहते हैं, तो आपको इसे कक्षा के बाहर परिभाषित करने की आवश्यकता है, जैसे:

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

यह भी बेहतर है कि यदि आप प्रोप प्रकारों को आयात करते हैं prop-types, तो नहीं react , अन्यथा आप कंसोल में चेतावनी देखेंगे (जैसा कि रिएक्ट 16 की तैयारी के लिए ):

import PropTypes from 'prop-types';

Comments

यदि आप स्थैतिक गुण प्लगइन का उपयोग कर रहे हैं, तो यह बैबल कॉन्फिगरेशन पर निर्भर करता है।

— डेव न्यूटन

धन्यवाद। पहला विकल्प एक ही त्रुटि को फेंक देता है, दूसरा विकल्प समस्या को हल करता है लेकिन मुझे समझ में नहीं आता है कि वर्ग विशेषता के रूप में परिभाषित करना इस मामले में त्रुटि क्यों फेंकता है। नोट: मेरे पास एक और घटक है जो कक्षा की विशेषता के रूप में ठीक परिभाषित करने का काम करता है

— क्रिटियन कैमिलो सेडीनो गैलेगो

निश्चित नहीं है कि एक असफल क्यों होता है और दूसरा काम करता है। मुझे लगा कि इसे किसी वर्ग पर वैधानिक रूप से परिभाषित करने की आवश्यकता है, शायद मैं गलत था।

— ओमरी अहरोन

Answer 2

ऐसा लगता है कि समस्या अंदर है eslint-plugin-react ।

यह सही ढंग से पता नहीं लगा सकता है कि propTypesअगर आपने कक्षा में कहीं भी विनाशकारी के माध्यम से नामांकित वस्तुओं का उल्लेख किया है, तो प्रॉप्स का क्या उल्लेख किया गया था।

था समान समस्या अतीत में

Comments

मैं कोलाहल-eslint उपयोग कर रहा हूँ और सक्षम सभी चरणों नोट: मैं एक और घटक है कि काम ठीक वर्ग विशेषता के रूप में परिभाषित किया है

— क्रिस्टियन कैमिलो cedeño gallego

@ cristiancamilocedeñogallego पद प्रासंगिक कॉन्फ़िगरेशन: package.json, .eslintrcयह मुश्किल बताने के लिए कारण है कि यह propTypes लेने नहीं करता है

— Alik

तो समस्या प्रवाह एनोटेशन में हैhandleClick

— Alik

हाँ @alik प्रवाह एनोटेशन को हटा दिया गया था और ठीक काम करता है

— cristian Camilo cedeño gallego

Answer 3

मैं इस मुद्दे पर पिछले कुछ दिनों में भाग गया। जैसा कि ओमरी अहरोन ने अपने उत्तर में कहा था, आपके समान प्रकार के लिए परिभाषाओं को जोड़ना महत्वपूर्ण है:

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

अपनी कक्षा के बाहर की प्रोफ़ेशन परिभाषाओं को जोड़ना न भूलें। मैं इसे अपनी कक्षा के ठीक नीचे / ऊपर रखूँगा। आप सुनिश्चित नहीं हैं कि आपके चर प्रकार या प्रत्यय अपने PropType (पूर्व: PropTypes.number) के लिए है, तो इस का उल्लेख NPM संदर्भ । PropTypes का उपयोग करने के लिए, आपको पैकेज आयात करना होगा:

import PropTypes from 'prop-types';

यदि आपको लाइनिंग त्रुटि मिलती है: someProp is not required, but has no corresponding defaultProps declarationतो आपको बस इतना करना होगा कि आप .isRequiredअपनी प्रोप परिभाषा के अंत में इस तरह जोड़ें :

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

या डिफ़ॉल्ट प्रोप मूल्यों को इस तरह जोड़ें:

SomeClass.defaultProps = {
    someProp: 1
};

यदि आप मेरे जैसे कुछ भी हैं, तो प्रतिक्रियाशील के साथ अनुभवहीन या अपरिचित हैं, तो आपको यह त्रुटि भी हो सकती है Must use destructuring props assignment:। इस त्रुटि को ठीक करने के लिए, उपयोग करने से पहले अपने प्रॉपर को परिभाषित करें। उदाहरण के लिए:

const { someProp } = this.props;

Answer 4

मुझे पता है कि यह उत्तर हास्यास्पद है, लेकिन इस नियम को अक्षम करने पर विचार करें जब तक कि बग्स पर काम न हो जाए या आपने अपने टूलिंग को अपग्रेड न कर लिया हो:

/* eslint-disable react/prop-types */ // TODO: upgrade to latest craco+eslint or Next.js?

या अपने eslintrc में प्रोजेक्ट-वाइड को अक्षम करें:

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

Comments

इस नियम को अक्षम करने के लिए वास्तविक वाक्यविन्यास है: "प्रतिक्रिया / प्रस्ताव-प्रकार": "बंद"

— केन ए कॉलिन्स

धन्यवाद यह भी है कि मैं नियम अनुभाग के तहत eslintrc में क्या इस्तेमाल किया

— i18b

Answer 5

समस्या हैंडल एनक्लॉक में प्रवाह एनोटेशन में है, मैंने इसे हटा दिया और ठीक धन्यवाद @alik काम करता है

Answer 6

समस्या: 'id1' प्रॉप्स सत्यापन, अनुलग्‍नक / प्रो-प्रकार में गायब है

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

नीचे समाधान एक समारोह घटक में काम किया:

let { id1 } = props;

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

उम्मीद है की वो मदद करदे।

Answer 7

मेरे लिए, नवीनतम संस्करण 7.21.5 में एस्लिन्ट-प्लगइन-रिएक्शन को अपग्रेड करते हुए इसे तय किया