无状态组件胖箭头函数中的Prop无法使用eslint进行验证

Question

我有以下内容：

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告诉我：

  道具验证中缺少

'bar'

似乎胖箭头返回JSX时，eslint失败了。

我可以通过将bar分配给this来解决这个问题：

const Foo = (props) => {
  this.bar = props.bar; //eslint sees this properly

  const myFunc = () => (
    <div>
      { this.bar }
    </div>
  );

这是最好的方法吗？为什么会这样？

.eslintrc

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

Answer 1

我发现了一种奇怪的行为。唯一的区别在于return语句：

现在bar中的propTypes也未注释：

PS：您还可以使用分解来绕过道具验证Foo = ({ bar }) => ...，而不必分配给道具const bar = props.bar。

我认为问题是因为myFunc看起来像一个功能组件，而eslint却错误地选择了它。

此外，这很有趣，如果您仅将props重命名为其他名称，eslint会变得无声：)

//编辑 似乎我的推理有点正确https://github.com/yannickcr/eslint-plugin-react/issues/2135#issuecomment-455034857

Answer 2

我想象<input type="checkbox" name="check" id="check"/> <label for="check" id="tog"></label> <div id="menu"> <a href="index.html"> <span class="button"></span> </a> <a href="index2.html"> <span class="button"></span> </a> 发生的事情被视为另一个无国籍组成部分。只需看看你的代码，它看起来是有效的，但是eslint可能会看到myFunc需要自己的myFunc，即使你访问的propTypes在同一范围内。您可以通过执行以下操作来验证这一点：

props

但是对于这方面的实用建议，我建议只返回

const myFunc = (props) => (
  <div>
    { props.bar }
  </div>
);
myFunc.propTypes = {
  bar: PropTypes.string.isRequired,
};

return myFunc({ bar: props.bar });

来自你的<div> { props.bar } </div> ，而不是在其中创建一个闭包。

Answer 3

如果你这样做会怎么样？

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;