web-dev-qa-db-fra.com

comment résoudre le `composant doit être écrit comme une pure fonction` erreur dans eslint-react?

class Option extends React.Component {
  constructor(props) {
    super(props);
    this.handleClickOption = this.handleClickOption.bind(this);
  }
  handleClickOption() {
    // some code
  }
  render() {
    return (
      <li onClick={this.handleClickOption}>{this.props.option}</li>
    );
  }
}

J'utilise eslint-config-airbnb pour vérifier le code ci-dessus et il affiche un message d'erreur comme Component should be written as a pure function.

Alors, comment changer le composant ci-dessus en fonction pure?

Merci de votre aide.

reactjseslint
43
Liu Dongyu

React 0,14 introduit des composants à fonction pure.

Cela devrait être l'option préférée pour tous les composants sans état.

function Option({ onClick, option }) {
    return (
        <li onClick={onClick}>
            {option}
        </li>
    );
}
42
David L. Walsh

Dans ES6, vous pouvez faire quelque chose de similaire à ceci:

const Options = (props) => {

    handleClickOption() {
        // some code
    }

    return (
        <li onClick={this.handleClickOption}>{this.props.option}</li>
    );
};

Options.propTypes = {
    // validate props
};

export default Options;
17
John Meyer

Les composants fonctionnels Stateless bénéficieront des optimisations futures des performances React spécifiques à ces composants . Voici comment nous pouvons écrire un composant en tant que fonction pure:

const App = () => {
  return (
    <div>
      <h2 id="heading">Hello ReactJS </h2>
      <header />
    </div>
  );
};

export default App;

Toutefois, si vous souhaitez écrire un composant dans le style ES6, vous pouvez le faire, mais dans ce cas, l'erreur eslint doit être supprimée (si vous utilisez eslint) .

PAR EXEMPLE:

"rules": {
    "react/prefer-stateless-function": "off"
}

Ensuite, voici le composant de style ES6 que vous pouvez écrire avec eslint enable:

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <header className="header">
        <h1>Home page</h1>
      </header>
    );
  }
}

export default Home;

14
vikram jeet singh

Cela signifie que vous déclarez le composant stateful dans react sans construction. Le scénario peut être comme ça

import React, { Component } from 'react';

class Something extends Component {
   render() {
      return (
        <div>Your classes</div>
      )
   }
}

Le code ci-dessus est faux, le code correct devrait être comme ceci

class Something extends Component {

   constructor(props) {
      super(props);
      this.props = props;
   }

   render() {
      return (
        <div>Your classes</div>
      )
   }
}
5
Faris Rayhan

J'ai le même problème. Quelqu'un sait-il comment appeler un accessoire spécifique à un composant dans la fonction de clic transmise?.

Par exemple.

function ElementRow({onClick, element, key}) {
  return (
    <tr key={key}>
      <td><a href="#" onClick={onClick}>Delete</a></td>
      <td>
        ...
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}

Dans la fonction onClick, j'ai besoin du element.id. Je cherche une solution sans utiliser bind()

Je sais comment le faire fonctionner avec React.createClass ou extend React.Component mais pas écrit en tant que fonction pure. 

Edit : Vous avez trouvé une solution, mais je ne sais pas si c'est une odeur de code. :)

function ElementRow({ onClick, element, key }) {
  const _onClick = (e) => {
    onClick(e, element.id);
  };

  return (
    <tr key={key}>
      <td><a href="#" onClick={_onClick}>Delete</a></td>
      <td>
        ...
      </td>
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}
0
hyde