[解決済み】Reactのeslintエラーはpropsの検証で見つからない
2022-01-28 04:32:53
質問
次のようなコードがあるのですが、eslintがスローします。
react/prop-types onClickOut; がプロップスバリデーションで欠落しています。
react/prop-types children; is missing in props validation
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;
パッケージ.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,
}
}
解決方法は?
問題はhandleClickのflowアノテーションにありますが、これを削除したら正常に動作するようになりました。 アリクさん、ありがとうございます。
関連
-
[解決済み】中央値の計算 - javascript
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] 特定の行のeslintルールをオフにする
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] Reactのstateとpropsの違いとは?
-
[解決済み] useEffect React Hook使用時の依存性欠如の警告を修正する方法
-
[解決済み】 {this.props.children} に props を渡すには?}
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】TypeError: 'undefined'はオブジェクトではありません。
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】XMLパースエラー:ルート要素が見つからない コンソールの場所 FF
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み】ETIMEDOUTエラーの対処方法は?