ESLint React PropTypes，道具验证中缺少 'prop'

Question

我有一个无状态的 React 组件

import React from 'react'
import styled from 'styled-components';
import PropTypes from 'prop-types';

export default props => <StyledButton>{props.children}</StyledButton>

StyledButton.propTypes = {
    children: PropTypes.node,
}
StyledButton.defaultProps = {
    children: null,
}

还有一个class组件

class Thumbnail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
           color: 'red',
        }
    }
    render() {
        return (
           <button>{this.props.children}</button>
       )
    }
}

Thumbnail.propTypes = {
    children: PropTypes.node,
}
Thumbnail.defaultProps = {
    children: null,
}

我的 eslintrc 文件

module.exports = {
"extends": "airbnb",
"plugins": [
    "react",
    "jsx-a11y",
    "import"
],
"rules": {
    "react/jsx-filename-extension": 0,
    "semi": 0,
    "indent": ["error", 4],
    "react/jsx-indent": 0,
    "jsx-a11y/img-redundant-alt": 0
}
};

Eslint 在无状态组件中抱怨 'children is missing in prop validation'。但是在 class 组件中没问题。

花了 2 个小时试图解决这个问题，任何帮助将不胜感激

Answer 1

这是因为您直接导出无状态组件而没有任何变量保存它，同时您正在为 StyledButton 创建 propTypes 和 defaultProps，这不存在。试试这个。

const StyledButton = props => <button>{props.children}</button>;

StyledButton.propTypes = {
  children: PropTypes.node,
};

StyledButton.defaultProps = {
  children: null,
};

export default StyledButton;

ESLint React PropTypes，道具验证中缺少 'prop'

ESLint React PropTypes, 'prop' is missing in prop validation

reactjs

eslint

react-proptypes

eslint-config-airbnb