У валідації реквізиту відсутня помилка eslint

У мене є наступний код, eslint throw:

реагувати / проп-типи onClickOut; відсутній у валідації реквізиту

реагувати / підтримувати дітей; відсутній у валідації реквізиту

propTypes була визначена, але еслінт її не визнає.

import React, { Component, PropTypes } from 'react';

class IxClickOut extends Component {
  static propTypes = {
    children: PropTypes.any,
    onClickOut: PropTypes.func,
  };

 componentDidMount() {
    document.getElementById('app')
      .addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    document.getElementById('app')
      .removeEventListener('click', this.handleClick);
  }

  handleClick = ({ target }: { target: EventTarget }) => {
    if (!this.containerRef.contains(target)) {
      this.props.onClickOut();
    }
  };

  containerRef: HTMLElement;

  render() {
    const { children, ...rest } = this.props;
    const filteredProps = _.omit(rest, 'onClickOut');

    return (
      <div
        {...filteredProps}
        ref={container => {
          this.containerRef = container;
        }}
      >
        {children}
      </div>
    );
  }
}

export default IxClickOut;

package.json

{
  "name": "verinmueblesmeteor",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "ios": "NODE_ENV=developement meteor run ios"
  },
  "dependencies": {
    "fine-uploader": "^5.10.1",
    "foundation-sites": "^6.2.3",
    "install": "^0.8.1",
    "ix-gm-polygon": "^1.0.11",
    "ix-type-building": "^1.4.4",
    "ix-type-offer": "^1.0.10",
    "ix-utils": "^1.3.7",
    "keymirror": "^0.1.1",
    "meteor-node-stubs": "^0.2.3",
    "moment": "^2.13.0",
    "npm": "^3.10.3",
    "rc-slider": "^3.7.3",
    "react": "^15.1.0",
    "react-addons-pure-render-mixin": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-fileupload": "^2.2.0",
    "react-list": "^0.7.18",
    "react-modal": "^1.4.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.0",
    "react-styleable": "^2.2.4",
    "react-textarea-autosize": "^4.0.4",
    "redux": "^3.5.2",
    "redux-form": "^5.3.1",
    "redux-thunk": "^2.1.0",
    "rxjs": "^5.0.0-beta.9",
    "rxjs-es": "^5.0.0-beta.9",
    "socket.io": "^1.4.8"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-eslint": "^6.0.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "core-js": "^2.0.0",
    "cssnano": "^3.7.1",
    "eslint": "^2.12.0",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-import-resolver-meteor": "^0.2.3",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.2.2",
    "eslint-plugin-react": "^5.1.1",
    "node-sass": "^3.8.0",
    "postcss-cssnext": "^2.6.0",
    "sasslets-animate": "0.0.4"
  },
  "cssModules": {
    "ignorePaths": [
      "node_modules"
    ],
    "jsClassNamingConvention": {
      "camelCase": true
    },
    "extensions": [
      "scss",
      "sass"
    ],
    "postcssPlugins": {
      "postcss-modules-values": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {},
      "autoprefixer": {}
    }
  }
}

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "whitelist": [
      "es7.decorators",
      "es7.classProperties",
      "es7.exportExtensions",
      "es7.comprehensions",
      "es6.modules"
  ],
  "plugins": ["transform-decorators-legacy"]
}

.eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "no-underscore-dangle": ["error", { "allow": [_id, b_codes_id] }],
  },
  "settings": {
    "import/resolver": "meteor"
  },
  "globals": {
    "_": true,
    "CSSModule": true,
    "Streamy": true,
    "ReactClass": true,
    "SyntheticKeyboardEvent": true,
  }
}

Вам потрібно визначити propTypesяк статичний геттер, якщо ви хочете, щоб це було в оголошенні класу:

static get propTypes() { 
    return { 
        children: PropTypes.any, 
        onClickOut: PropTypes.func 
    }; 
}

Якщо ви хочете визначити його як об'єкт, вам потрібно визначити його поза класом, наприклад:

IxClickOut.propTypes = {
    children: PropTypes.any,
    onClickOut: PropTypes.func,
};

Також краще, якщо ви імпортуєте типи prop з prop-types, ні react , інакше ви побачите попередження в консолі (як підготовку до React 16 ):

import PropTypes from 'prop-types';

Здається, проблема в eslint-plugin-react.

Він не може правильно визначити, про що було згадано реквізити, propTypesякщо ви анотовували іменовані об'єкти шляхом деструктуризації в будь-якому місці класу.

Була аналогічна проблема в минулому

Я стикався з цим питанням протягом останніх кількох днів. Як сказав Омрі Ахарон у своїй відповіді вище, важливо додати визначення для ваших типів реквізиту, подібні до:

SomeClass.propTypes = {
    someProp: PropTypes.number,
    onTap: PropTypes.func,
};

Не забудьте додати визначення реквізиту поза вашим класом. Я розмістив би це прямо під / над своїм класом. Якщо ви не впевнені, який тип змінної чи суфікс для вашого типу PropType (наприклад: PropTypes.number), зверніться до цього посилання npm . Щоб використовувати PropTypes, потрібно імпортувати пакет:

import PropTypes from 'prop-types';

Якщо ви отримуєте помилку підключення: someProp is not required, but has no corresponding defaultProps declarationвсе, що вам потрібно зробити, це додати .isRequiredдо кінця визначення опису так:

SomeClass.propTypes = {
    someProp: PropTypes.number.isRequired,
    onTap: PropTypes.func.isRequired,
};

АБО додайте значення проп за замовчуванням приблизно так:

SomeClass.defaultProps = {
    someProp: 1
};

Якщо ви що - небудь на зразок мене, недосвідченого або незнайоме з reactjs, ви також можете отримати цю помилку: Must use destructuring props assignment. Щоб виправити цю помилку, визначте свій реквізит перед тим, як їх використовувати. Наприклад:

const { someProp } = this.props;

Я знаю, що ця відповідь смішна, але подумайте про те, щоб просто вимкнути це правило, доки помилки не будуть виправлені або ви не оновили свої інструменти:

/* eslint-disable react/prop-types */ // TODO: upgrade to latest craco+eslint or Next.js?

Або вимкніть проект у вашому eslintrc:

"rules": {
  "react/prop-types": "off"
}

проблема в анотації потоку в handleClick, я видалив це і чудово працює, дякую @alik

Проблема: у валідації реквізитів, eslintreact / prop-типів відсутній 'id1'

<div id={props.id1} >
    ...
</div>

Нижче рішення працювало у компоненті функції:

let { id1 } = props;

<div id={id1} >
    ...
</div>

Сподіваюся, що це допомагає.

Для мене це оновило оновлення eslint-plugin-response до останньої версії 7.21.5