jsx-eslint/eslint-plugin-react

react/no-unused-prop-types no working when use `{...this.state}`

Aperta

#1601 aperta il 13 dic 2017

 (7 commenti) (8 reazioni) (0 assegnatari)JavaScript (2731 fork)batch import
bughelp wanted

Metriche repository

Star
 (9293 stelle)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

HI ALL, I found a problem with react/no-unused-prop-types rule. When I use {...this.state} syntax in React component, the rule can't find the unused prop. I don't know is this a bug with eslint-plugin-react? Please Help. Thanks.

Component

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  static propTypes = {
    bar: PropTypes.string.isRequired,
  };

  state = {
    style: { color: 'red' },
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          // when I add `{...this.state}`, the rule is no working
          <h1 className="App-title" {...this.state} >Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

.eslintrc

{
  "extends": "react-app",
  "rules": {
    "react/no-unused-prop-types": [
      "error",
      {
        "customValidators": [],
        "skipShapeProps": true
      }
    ]
  }
}

versions

  • eslint: 4.10.0
  • eslint-plugin-react: 7.4.0

Reproduce problem repos

https://github.com/zhaozhiming/eslint-plugin-react-no-unused-prop-types

Guida contributor