[英]React eslint error missing in props validation
I have the next code, eslint throw:我有下一个代码,eslint throw:
react/prop-types onClickOut;
反应/道具类型 onClickOut; is missing in props validation
道具验证中缺少
react/prop-types children;
反应/道具类型的孩子; is missing in props validation
道具验证中缺少
propTypes
was 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 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 .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,
}
}
You need to define propTypes
as 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
, not react
, otherwise you'll see warnings in console (as preparation for React 16 ):此外,最好从
prop-types
导入 prop 类型,而不是react
,否则您会在控制台中看到警告(作为React 16 的准备):
import PropTypes from 'prop-types';
I know this answer is ridiculous, but consider just disabling this rule until the bugs are worked out or you've upgraded your tooling:我知道这个答案很荒谬,但请考虑禁用此规则,直到错误得到解决或您升级了工具:
/* eslint-disable react/prop-types */ // TODO: upgrade to latest eslint tooling
Or disable project-wide in your eslintrc:或者在你的 eslintrc 中禁用项目范围:
"rules": {
"react/prop-types": "off"
}
It seems that the problem is in eslint-plugin-react
.似乎问题出在
eslint-plugin-react
。
It can not correctly detect what props were mentioned in propTypes
if you have annotated named objects via destructuring anywhere in the class.如果您通过在类中的任何地方解构来注释命名对象,则它无法正确检测
propTypes
中提到的道具。
There was similar problem in the past过去有类似的问题
I ran into this issue over the past couple days.我在过去几天遇到了这个问题。 Like Omri Aharon said in their answer above, it is important 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.不要忘记在类之外添加 prop 定义。 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 .
如果您不确定您的 PropType 的变量类型或后缀是什么(例如:PropTypes.number),请参阅此npm 参考。 To Use PropTypes, you must import the package:
要使用 PropTypes,您必须导入包:
import PropTypes from 'prop-types';
If you get the linting error: someProp is not required, but has no corresponding defaultProps declaration
all you have to do is either add .isRequired
to 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
.如果你和我一样,没有经验或不熟悉 reactjs,你也可能会得到这个错误:
Must use destructuring props assignment
。 To fix this error, define your props before they are used.要修复此错误,请在使用 props 之前定义它们。 For example:
例如:
const { someProp } = this.props;
对我来说,将eslint-plugin-react升级到最新版本 7.21.5 解决了这个问题
问题出在 handleClick 中的流注释中,我删除了它并且工作正常,谢谢@alik
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.希望有帮助。
PropTypes checking is a good thing, not recommend to ignore by settings PropTypes 检查是个好东西,不建议通过设置忽略
You can auto generate the propTypes by using vscode React PropTypes Generate extension:您可以使用 vscode React PropTypes Generate 扩展自动生成 propTypes:
I'm finding eslint to be overly strict in the project I'm working on myself but for this error I fixed it by defining my interface and then implementing as such:我发现 eslint 在我自己工作的项目中过于严格,但是对于这个错误,我通过定义我的接口然后实现它来修复它:
interface myInterface: {
test: string
}
const MyComponent: React.FC<myInterface> = (props: myInterface) => {
Duplicating my answer from a similar question: https://stackoverflow.com/a/69199304/4290193从类似问题中复制我的答案: https : //stackoverflow.com/a/69199304/4290193
eslint-plugin-react@^7.25.0
appears to have resolved the issue for those using React.FC<IProps>
with react/prop-types
validation rule. eslint-plugin-react@^7.25.0
似乎已经解决了那些使用React.FC<IProps>
和react/prop-types
验证规则的问题。
So instead of所以代替
const Example: React.FC<IProps> = (props: IProps) => ...
This now works without warnings after the update更新后现在可以正常工作而不会发出警告
const Example: React.FC<IProps> = (props) => ...
Functional React component.函数式反应组件。 Defined as object.
定义为对象。 I got this error because I copied and pasted the object from a different with a slightly different name and forgot to change the name of the proptypes object.
我收到此错误是因为我从名称略有不同的不同对象复制并粘贴了该对象,而忘记更改 proptypes 对象的名称。
FooterIcons.propTypes = {} -> FooterIcon.propTypes
Install prop-types package with- npm i prop-types --save
Import it-安装 prop-types 包 -
npm i prop-types --save
导入它-
import PropTypes from 'prop-types';
Then specify the props, I implemented this way-然后指定道具,我是这样实现的——
export default function Text({ children }) {
Text.propTypes = {
children: PropTypes.node.isRequired,
};
return (
<VStyle className="para">
<p>{children}</p>
</VStyle>
);
}
Also add this in your eslintrc.json or .js file还要在您的 eslintrc.json 或 .js 文件中添加它
"rules": {
"react/prop-types": "off"
}
Instead of disable prop-types
rule, we can introduce children property as part of component props, eg:代替禁用
prop-types
规则,我们可以引入 children 属性作为组件 props 的一部分,例如:
import React, { Component } from 'react';
export default class ErrorBoundary extends Component<{ children: React.ReactNode }> {
constructor(props: { children: React.ReactNode }) {
super(props);
this.state = { error: null, errorInfo: null };
}
componentDidCatch(error: Readonly<unknown>, errorInfo: Readonly<unknown>): void {
this.setState({ error, errorInfo });
}
render(): React.ReactElement | React.ReactNode {
const { children } = this.props;
const { error, errorInfo } = this.state as Readonly<Record<string, { componentStack: string }>>;
if (errorInfo)
return (
<details>
<h3>Oops, error detected.</h3>
<p>{error?.toString()}</p>
<p>{errorInfo?.componentStack}</p>
</details>
);
return children;
}
}
Above one is typical example of getting eslint
error gone ~~上面一个是
eslint
错误消失的典型例子~~
Don't worry be happy ~~不用担心开心~~
On the new version of React and also Next.js, you can simply import PropTypes as follows,在新版本的 React 和 Next.js 上,您可以简单地导入 PropTypes,如下所示,
import PropTypes from "prop-types";<\/code>
and at the bottom of your file add defaultProps and propTypes such as,并在文件底部添加 defaultProps 和 propTypes,例如,
Post.defaultProps = {
posts: "",
};
Post.propTypes = {
posts: PropTypes.string,
};
export default Post;
Another way is:另一种方法是:
File: App.js文件:App.js
...
<Component1 key1="abc" />
...
File: Component1.js文件:Component1.js
1 error : 1 个错误:
function Component1 ({ key1 }) {
console.log('key1', key1);
}
2 error : 2错误:
function Component1 (props) {
let{ key1 } = props;
console.log('key1', key1);
}
3 works : 3作品:
NOTE: prop
instead of props
注意:
prop
而不是props
function Component1 (prop) {
let{ key1 } = prop;
console.log('key1', key1);
}
Looks like, linter only checks for proper word props
, not for prop
or like.看起来,linter 只检查正确的单词
props
,而不是prop
或 like。
It's a solution if you are just getting started or quick prototyping.如果您刚刚开始或快速原型设计,这是一个解决方案。
For later or large projects, defining proptypes might be better.对于后期或大型项目,定义 proptypes 可能会更好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.