无状态组件胖箭头函数中的道具无法使用 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;

埃斯林特告诉我：

道具验证中缺少“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

我想象正在发生的事情是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;