Lỗi React eslint bị thiếu trong xác thực đạo cụ

87

Tôi có mã tiếp theo, đừng vội ném:

phản ứng / chống lại các loại onClickOut; bị thiếu trong xác thực đạo cụ

con cái phản ứng / chống đỡ; bị thiếu trong xác thực đạo cụ

propTypes đã được định nghĩa nhưng eslint không nhận ra nó.

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,
  }
}
javascript  reactjs  eslint  flowtype 
— cristian camilo cedeño gallego
nguồn
Có lẽ tốt nhất nên viết:const { children, onClickOut, ...filteredProps } = this.props;
— horyd 31-07-16
Bạn đang sử dụng babel-eslint?
— Timo,
@horyd không, nếu tôi làm điều đó eslint ném không-không sử dụng-vars onClickOut được xác định nhưng không bao giờ sử dụng
— cristian Camilo cedeño Gallego
cố gắng định nghĩa nó như sau:static get propTypes() { return { children: PropTypes.any, onClickOut: PropTypes.func }; }
— Omri Aharon
vâng @TimoSta tôi sử dụng babel-eslint
— cristian Camilo cedeño Gallego

Câu trả lời:

87

Bạn cần phải định nghĩa propTypesnhư một getter tĩnh nếu bạn muốn nó bên trong khai báo lớp:

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

Nếu bạn muốn định nghĩa nó như một đối tượng, bạn cần phải định nghĩa nó bên ngoài lớp, như sau:

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

Ngoài ra, sẽ tốt hơn nếu bạn nhập các loại hỗ trợ từ prop-types, nếu không react , bạn sẽ thấy các cảnh báo trong bảng điều khiển (để chuẩn bị cho React 16 ):

import PropTypes from 'prop-types';
— Omri Aharon
nguồn
1
Phụ thuộc vào cấu hình Babel, nó không cần phải tốt hơn nếu bạn đang sử dụng plugin thuộc tính tĩnh.
— Dave Newton,
Cảm ơn. Tùy chọn đầu tiên gây ra cùng một lỗi, tùy chọn thứ hai giải quyết vấn đề nhưng tôi không hiểu tại sao việc xác định là thuộc tính lớp lại gây ra lỗi trong trường hợp này. Lưu ý: Tôi có một thành phần mà công việc tốt xác định như thuộc tính lớp
— cristian Camilo cedeño Gallego
1
Không chắc chắn tại sao một cái không thành công và cái kia hoạt động. Tôi nghĩ rằng nó cần phải được định nghĩa tĩnh trên một lớp theo cách nào đó, có lẽ tôi đã sai.
— Omri Aharon,
14

Có vẻ như vấn đề là ở eslint-plugin-react.

Nó không thể phát hiện chính xác những đạo cụ nào đã được đề cập propTypesnếu bạn đã chú thích các đối tượng được đặt tên thông qua cấu trúc ở bất kỳ đâu trong lớp.

Chẳng có vấn đề tương tự trong quá khứ

— Alik
nguồn
Tôi đang sử dụng babel-eslint và cho phép tất cả các khâu Lưu ý: Tôi có một thành phần mà công việc tốt xác định như thuộc tính lớp
— cristian Camilo cedeño Gallego
@ cristiancamilocedeñogallego configs bài liên quan: package.json, .eslintrcThật khó để nói tại sao nó không nhấc propTypes
— Alik
1
vì vậy vấn đề là ở dòng chú thích tronghandleClick
— Alik
vâng @alik là loại bỏ các chú thích dòng chảy và hoạt động tốt
— cristian Camilo cedeño Gallego
7

Tôi đã gặp phải vấn đề này trong vài ngày qua. Giống như Omri Aharon đã nói trong câu trả lời của họ ở trên, điều quan trọng là phải thêm các định nghĩa cho các loại prop của bạn tương tự như:

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

Đừng quên thêm các định nghĩa đề xuất bên ngoài lớp học của bạn. Tôi sẽ đặt nó ngay bên dưới / phía trên lớp của tôi. Nếu bạn không chắc loại biến hoặc hậu tố của mình là gì cho PropType của bạn (ví dụ: PropTypes.number), hãy tham khảo tài liệu tham khảo npm này . Để sử dụng PropTypes, bạn phải nhập gói:

import PropTypes from 'prop-types';

Nếu bạn gặp lỗi in linting: someProp is not required, but has no corresponding defaultProps declarationtất cả những gì bạn phải làm là thêm .isRequiredvào cuối định nghĩa prop của bạn như sau:

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

HOẶC thêm các giá trị chống đỡ mặc định như vậy:

SomeClass.defaultProps = {
    someProp: 1
};

Nếu bạn là bất cứ điều gì như tôi, chưa từng trải hoặc không quen với reactjs, bạn cũng có thể nhận được lỗi này: Must use destructuring props assignment. Để khắc phục lỗi này, hãy xác định đạo cụ của bạn trước khi chúng được sử dụng. Ví dụ:

const { someProp } = this.props;
— airvine
nguồn
4

Tôi biết câu trả lời này là vô lý, nhưng hãy xem xét việc tắt quy tắc này cho đến khi các lỗi được giải quyết hoặc bạn đã nâng cấp công cụ của mình:

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

Hoặc tắt toàn bộ dự án trong eslintrc của bạn:

"rules": {
  "react/prop-types": "off"
}
— Devin G Rhode
nguồn
1
Cú pháp thực tế cho việc vô hiệu hóa quy tắc này là: "phản ứng / prop-loại": "off"
— Ken Một Collins
Nhờ điều này cũng là những gì tôi được sử dụng trong eslintrc dưới phần quy tắc
— iBobb
2

Sự cố: thiếu 'id1' trong xác thực đạo cụ, eslintreact / prop-type

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

Giải pháp dưới đây đã hoạt động, trong một thành phần chức năng:

let { id1 } = props;

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

Hy vọng rằng sẽ giúp.

— Manohar Reddy Poreddy
nguồn
1

Đối với tôi, việc nâng cấp eslint-plugin- react lên phiên bản 7.21.5 mới nhất đã sửa lỗi này

— Siphenathi
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.