Javascript 道具验证中缺少反应 eslint 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38684925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React eslint error missing in props validation
提问by cristian camilo cede?o gallego
I have the next code, eslint throw:
我有下一个代码，eslint throw：
react/prop-types onClickOut; is missing in props validation
react/prop-types children; is missing in props validation
反应/道具类型 onClickOut；道具验证中缺少
反应/道具类型的孩子；道具验证中缺少
propTypeswas defined but eslint does not recognize it.
propTypes已定义，但 eslint 无法识别。
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
包.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
.babelrc
{
"presets": [
"es2015",
"react",
"stage-0"
],
"whitelist": [
"es7.decorators",
"es7.classProperties",
"es7.exportExtensions",
"es7.comprehensions",
"es6.modules"
],
"plugins": ["transform-decorators-legacy"]
}
.eslintrc
.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,
}
}
采纳答案by cristian camilo cede?o gallego
the problem is in flow annotation in handleClick, i removed this and works fine thanks @alik
问题出在 handleClick 中的流注释中，我删除了它并且工作正常，谢谢@alik
回答by Omri Aharon
You need to define propTypesas a static getter if you want it inside the class declaration:
propTypes如果您希望在类声明中使用它，则需要将其定义为静态 getter：
static get propTypes() {
return {
children: PropTypes.any,
onClickOut: PropTypes.func
};
}
If you want to define it as an object, you need to define it outside the class, like this:
如果要将其定义为对象，则需要在类外定义它，如下所示：
IxClickOut.propTypes = {
children: PropTypes.any,
onClickOut: PropTypes.func,
};
Also it's better if you import prop types from prop-types, notreact, otherwise you'll see warnings in console (as preparation for React 16):
此外，它的更好，如果你输入从道具类型prop-types，不react，否则你会看到在控制台警告（如准备阵营16）：
import PropTypes from 'prop-types';
回答by Alik
It seems that the problem is in eslint-plugin-react.
问题似乎出在eslint-plugin-react.
It can not correctly detect what props were mentioned in propTypesif you have annotated named objects via destructuring anywhere in the class.
propTypes如果您通过在类中的任何地方解构来注释命名对象，则它无法正确检测到哪些道具被提及。
There was similar problemin the past
过去有类似的问题
回答by airvine
I ran into this issue over the past couple days. Like Omri Aharon said in their answer above, it is import to add definitions for your prop types similar to:
我在过去几天遇到了这个问题。就像 Omri Aharon 在上面的回答中所说的那样，为您的道具类型添加类似于以下内容的定义很重要：
SomeClass.propTypes = {
someProp: PropTypes.number,
onTap: PropTypes.func,
};
Don't forget to add the prop definitions outside of your class. I would place it right below/above my class. If you are not sure what your variable type or suffix is for your PropType (ex: PropTypes.number), refer to this npm reference. To Use PropTypes, you must import the package:
不要忘记在类之外添加 prop 定义。我会把它放在我班级的正下方/上方。如果您不确定您的 PropType 的变量类型或后缀是什么（例如：PropTypes.number），请参阅此npm 参考。要使用 PropTypes，您必须导入包：
import PropTypes from 'prop-types';
If you get the linting error:someProp is not required, but has no corresponding defaultProps declarationall you have to do is either add .isRequiredto the end of your prop definition like so:
如果您收到 linting 错误：someProp is not required, but has no corresponding defaultProps declaration您所要做的就是添加.isRequired到 prop 定义的末尾，如下所示：
SomeClass.propTypes = {
someProp: PropTypes.number.isRequired,
onTap: PropTypes.func.isRequired,
};
OR add default prop values like so:
或者像这样添加默认的 prop 值：
SomeClass.defaultProps = {
someProp: 1
};
If you are anything like me, unexperienced or unfamiliar with reactjs, you may also get this error: Must use destructuring props assignment. To fix this error, define your props before they are used. For example:
如果你和我一样，没有经验或不熟悉 reactjs，你也可能会得到这个错误：Must use destructuring props assignment. 要修复此错误，请在使用 props 之前定义它们。例如：
const { someProp } = this.props;
回答by Manohar Reddy Poreddy
Issue: 'id1' is missing in props validation, eslintreact/prop-types
问题：道具验证中缺少“id1”，eslintreact/prop-types
<div id={props.id1} >
...
</div>
Below solution worked, in a function component:
以下解决方案在功能组件中起作用：
let { id1 } = props;
<div id={id1} >
...
</div>
Hope that helps.
希望有帮助。
