ESLint отсутствует проверка реквизитов в компоненте класса

Просматривая официальные документы по проверке типов, ESLint по какой-то причине выдает ошибку, когда проверка деконструированного свойства.

Рабочий функциональный компонент

import React from 'react';
import PropTypes from 'prop-types';
import { graphql } from 'react-apollo';

function MyComponentContainer(props) {
  const { data: { loading, error, user } } = props;
  if (loading) { return ( <Loader/> ); }
  if (error) { return ( <Error /> ); }
  return <MyComponent />;
}

MyComponentContainer.propTypes = {
  data: PropTypes.shape({}),
};

MyComponentContainer.defaultProps = {
  data: {},
};

export graphql(...)(...)

Компонент класса ошибок

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { graphql } from 'react-apollo';

function MyComponentContainer extends Component{
  constructor(){...}
  const { data: { loading, error, user }} = this.props; <<<<<<< 'data' is missing in props validation
  render(){
    if (loading) { return ( <Loader/> ); }
    if (error) { return ( <Error /> ); }
    return <MyComponent />;
  }

}

MyComponentContainer.propTypes = {
  data: PropTypes.shape({}),
};

MyComponentContainer.defaultProps = {
  data: {},
};

export graphql(...)(...)

.eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true,
        "modules": true,
        "experimentalObjectRestSpread": true
    }
  },
  "env":{
    "browser": true,
    "jest": true
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import",
    "jest"
  ],
  "rules": {
    "no-tabs": 0,
    "no-mixed-spaces-and-tabs": 0,
    camelcase: ["error", {properties: "never"}],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "jsx-a11y/anchor-is-valid": [ "error", {
        "components": [ "Link" ],
        "specialLink": [ "to" ],
        "aspects": [ "noHref", "invalidHref", "preferButton" ]
      }]
  }
}

В функциональном компоненте ESLint ведет себя так, как ожидалось. Однако при применении того же метода к компоненту класса невозможно проверить данные. Я думал, что это может быть какая-то проблема с областью видимости, но все, что я пробовал «данные», не проходит проверку. Просмотрел довольно много примеров, и оказалось, что реквизиты объявляются правильно, но, может быть, я что-то упустил?


reactjs javascript eslint react-proptypes
person wsfuller    schedule 22.11.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, нашел еще один пример, где его нужно объявить.

Документация по плагину ESLint React

function MyComponentContainer extends Component{
  static propTypes = {
    data: PropTypes.shape({}),
  };

  static defaultProps = {
    data: {},
  };

  constructor(){...}
  const { data: { loading, error, user }} = this.props;
  render(){
    if (loading) { return ( <Loader/> ); }
    if (error) { return ( <Error /> ); }
    return <MyComponent />;
  }
}

Примечание: propTypes необходимо объявлять до constructor, иначе это вызовет еще одну ошибку Lint.

person wsfuller    schedule 22.11.2017