소품 유효성 검사에서 누락 된 React eslint 오류

87

다음 코드가 있습니다. eslint throw :

반응 / 소품 유형 onClickOut; 소품 유효성 검사에 누락되었습니다.

반응 / 소품 유형 어린이; 소품 유효성 검사에 누락되었습니다.

propTypes 정의되었지만 eslint가 인식하지 못합니다.

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 
— 크리스티안 카밀로 세데뇨 갈 레고
소스
아마도 최고 쓰기 :const { children, onClickOut, ...filteredProps } = this.props;
— horyd
babel-eslint를 사용하고 있습니까?
— Timo
내가 그것을 넣지 eslint 할 경우 @horyd하지 onClickOut가 정의되어 있지만 사용되지 않습니다 노 미사용 바르
— 크리스티안 카밀로 cedeño 레고
로 정의하려고 :static get propTypes() { return { children: PropTypes.any, onClickOut: PropTypes.func }; }
— 오므리 아론에게
예 @TimoSta 나는 바벨 - eslint를 사용
— 크리스티안 카밀로 cedeño 레고

답변:

87

propTypes클래스 선언 내부에 원하는 경우 정적 getter 로 정의해야합니다 .

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

객체로 정의하려면 다음과 같이 클래스 외부에서 정의해야합니다.

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

또한 prop-types, not 에서 prop 유형을 가져 오는 것이 더 좋습니다 react. 그렇지 않으면 콘솔에 경고가 표시됩니다 ( React 16 준비로 ).

import PropTypes from 'prop-types';
— 오므리 아론
소스
1
Babel 구성에 따라 정적 속성 플러그인을 사용하는 경우 더 나을 필요는 없습니다.
— Dave Newton
감사. 첫 번째 옵션은 동일한 오류를 던지고 두 번째 옵션은 문제를 해결하지만이 경우 클래스 속성으로 정의하면 오류가 발생하는 이유를 이해하지 못합니다. 참고 : 나는 잘 동작 클래스의 속성으로 정의하는 또 다른 구성 요소가
— 크리스티안 카밀로 cedeño 레고
1
하나는 실패하고 다른 하나는 작동하는 이유를 모릅니다. 나는 그것이 어느 쪽이든 클래스에서 정적으로 정의되어야한다고 생각했는데, 아마도 내가 틀렸을 것입니다.
— Omri Aharon
14

문제가있는 것 같습니다 eslint-plugin-react.

propTypes클래스의 어느 곳에서나 디스트 럭처링을 통해 명명 된 객체에 주석을 달면 어떤 props에 언급되었는지 정확하게 감지 할 수 없습니다 .

과거에도 비슷한 문제 가 있었어요

— 알리 크
소스
나는 모든 단계 참고 바벨 - eslint를 사용 가능하게하고있다 : 나는 잘 작동 클래스의 속성으로 정의하는 또 다른 구성 요소가
— 크리스티안 카밀로 cedeño 레고
@ 후 관련 CONFIGS을 cristiancamilocedeñogallego : package.json, .eslintrcpropTypes을 선택하지 않는 이유를 말할 어렵다
— Alik
1
그래서 문제는 흐름 주석에 있습니다handleClick
— Alik
@alik 예 흐름 주석을 제거했고 잘 작동
— 크리스티안 카밀로 cedeño 레고
7

지난 며칠 동안이 문제가 발생했습니다. Omri Aharon이 위의 답변에서 말했듯이 다음과 유사한 소품 유형에 대한 정의를 추가하는 것이 중요합니다.

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

클래스 외부에 소품 정의를 추가하는 것을 잊지 마십시오. 수업 바로 아래 / 위에 배치합니다. PropType (예 : PropTypes.number)에 대한 변수 유형 또는 접미사가 무엇인지 확실하지 않은 경우이 npm 참조를 참조하십시오 . PropTypes를 사용하려면 패키지를 가져와야합니다.

import PropTypes from 'prop-types';

linting 오류가 발생하면 다음 과 같이 소품 정의 끝에 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;
— Airvine
소스
5

이 대답이 우스꽝 스럽다는 것을 알고 있지만 버그가 해결되거나 도구를 업그레이드 할 때까지이 규칙을 비활성화하는 것이 좋습니다.

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

또는 eslintrc에서 프로젝트 전체를 비활성화하십시오.

"rules": {
  "react/prop-types": "off"
}
— 데빈 G로드
소스
1
이 규칙을 비활성화하는 실제 구문은 다음과 같습니다. "react / prop-types": "off"
— Ken A Collins
감사합니다. 이것은 규칙 섹션에서 eslintrc에서 사용한 것이기도합니다
— iBobb
2

문제 : 소품 유효성 검사, eslintreact / prop-types에서 'id1'이 누락되었습니다.

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

아래 솔루션은 함수 구성 요소에서 작동했습니다.

let { id1 } = props;

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

도움이 되었기를 바랍니다.

— 마노 하르 레디 포 레디
소스
1

나를 위해 eslint-plugin-react 를 최신 버전 7.21.5로 업그레이드 하면이 문제가 해결되었습니다.

— Siphenathi
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.