[英]Prop in stateless component fat arrow function cannot be validated with eslint
I have the following:我有以下几点:
import React from 'react';
import PropTypes from 'prop-types';
const Foo = (props) => {
const myFunc = () => (
<div>
{ props.bar }
</div>
);
return myFunc();
};
Foo.propTypes = {
bar: PropTypes.string.isRequired,
};
export default Foo;
Eslint tells me:埃斯林特告诉我:
'bar' is missing in props validation道具验证中缺少“bar”
It seems as though when the fat arrow returns JSX, eslint fails.似乎当粗箭头返回 JSX 时,eslint 失败了。
I can get around this by assigning bar
to this
:我可以通过为此分配bar
来解决this
:
const Foo = (props) => {
this.bar = props.bar; //eslint sees this properly
const myFunc = () => (
<div>
{ this.bar }
</div>
);
Is this the best way to go about this?这是最好的方法吗? Why is this happening?为什么会这样?
.eslintrc .eslintrc
// .eslint.json // .eslint.json
{
"extends": "airbnb",
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"es6": true,
"jest": true
},
"plugins": [
"react",
"import",
"jsx-a11y"
],
"rules": {
"react/jsx-filename-extension": 0,
"func-names": 0,
"strict": 0,
"quotes": [1, "single"],
"no-confusing-arrow": 0,
"react/prefer-es6-class": 0,
"babel/generator-star-spacing": 0,
"no-underscore-dangle": 0,
"linebreak-style": ["error", "windows"],
"no-named-as-default": 0,
}
}
I imagine what's happening is myFunc
is seen as another stateless component.我想象正在发生的事情是myFunc
被视为另一个无状态组件。 Just eyeballing your code, it looks valid, but eslint likely is seeing myFunc
as needing its own propTypes
, even though the props
you are accessing is in the same scope.只是盯着你的代码,它看起来是有效的,但 eslint 可能认为myFunc
需要自己的propTypes
,即使你正在访问的props
在同一范围内。 You could verify this by doing something like:您可以通过执行以下操作来验证这一点:
const myFunc = (props) => (
<div>
{ props.bar }
</div>
);
myFunc.propTypes = {
bar: PropTypes.string.isRequired,
};
return myFunc({ bar: props.bar });
But for practical advice on this, I would suggest just returning但是对于这方面的实用建议,我建议返回
<div>
{ props.bar }
</div>
from your Foo
instead of creating a closure inside it.从你的Foo
而不是在里面创建一个闭包。
What happens if you do it this way?如果你这样做会发生什么?
import React from 'react';
import PropTypes from 'prop-types';
const Foo = (props) => {
const myFunc = (bar) => (
<div>
{ bar }
</div>
);
// access bar here.
return myFunc(props.bar);
};
Foo.propTypes = {
bar: PropTypes.string.isRequired,
};
export default Foo;
I have discovered a strange behaviour.我发现了一个奇怪的行为。 The only difference is in the return statement:唯一的区别在于 return 语句:
Now also the bar
in propTypes
is uncommented:现在propTypes
的bar
也没有注释:
PS: You could also use destructuring to get around the props validation Foo = ({ bar }) => ...
instead of having to assign it const bar = props.bar
. PS:您还可以使用解构来绕过道具验证Foo = ({ bar }) => ...
而不必分配它const bar = props.bar
。
I think the problem is because the myFunc
looks like a functional component and that eslint is picking it up wrongly.我认为问题是因为myFunc
看起来像一个功能组件,而 eslint 错误地选择了它。
Also, this is rather funny, if you simply rename the props
to anything else, eslint goes silent :)此外,这很有趣,如果您只是将props
重命名为其他任何内容,eslint 将保持沉默 :)
//edit Seems like my reasoning was somewhat correct https://github.com/yannickcr/eslint-plugin-react/issues/2135#issuecomment-455034857 //编辑似乎我的推理有点正确https://github.com/yannickcr/eslint-plugin-react/issues/2135#issuecomment-455034857
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.