プロップは、私は以下の持っているeslint

Question

で検証することはできません

'バー' は小道具の検証に欠けている

太い矢印がJSXを返すように見えても、eslintは失敗したようです。

私はthisにbarを割り当てることによって、これを回避することができます

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が別のステートレスなコンポーネントとして見られています。ちょうどあなたのコードを見て、それは有効に見えますが、あなたがpropsあなたがアクセスしているにもかかわらず、は、それ自身のpropTypesを必要とすると考えている可能性が高いです。

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

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

をしかし、この上の実用的なアドバイスのために、私はちょうどあなたのFooから

<div> 
    { props.bar } 
</div> 

を返すのではなく内部の閉鎖を作成することをお勧め：あなたのような何かをすることによって、これを確認することができます。

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;