रंगमंच की सामग्री का सत्यापन में लापता

Question

मैं अगले कोड है eslint त्रुटि प्रतिक्रिया, फेंक eslint:

प्रतिक्रिया/प्रोप-प्रकार 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, 
    } 
} 

Answer 1

समस्या handleClick में प्रवाह एनोटेशन में है में similar problem था, मैं इस निकाल दिया और @alik

Answer 2

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

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

आप एक वस्तु के रूप में यह निर्धारित करना चाहते हैं, तो आप इस तरह, कक्षा के बाहर यह निर्धारित करने होंगे:

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

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

import PropTypes from 'prop-types'; 

Answer 3

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

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

अतीत