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

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' is missing in props validation

好像当粗箭头 returns 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

我想正在发生的事情是 myFunc 被视为另一个无状态组件。只是盯着你的代码，它看起来是有效的，但 eslint 可能认为 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>

从您的 Foo 而不是在其中创建闭包。

Answer 2

如果你这样做会发生什么？

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;

Answer 3

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

现在 propTypes 中的 bar 也取消了注释：

PS：您还可以使用解构来绕过 props 验证 Foo = ({ bar }) => ... 而不是必须分配它 const bar = props.bar.

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

此外，这很有趣，如果您只是将 props 重命名为其他任何名称，eslint 将停止运行 :)

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

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

Prop in stateless component fat arrow function cannot be validated with eslint

reactjs

eslint