reactjs - react - webpack eslint

¿Cómo resolver el error ''Component debe escribirse como una función pura'' en eslint-react?

Question

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>
    );
  }
}

Uso eslint-config-airbnb para verificar el código anterior y me muestra un mensaje de error como Component should be written as a pure function .

Entonces, ¿cómo cambiar el componente anterior a la función pura?

Gracias por tu ayuda.

Answer 1

En ES6 puede hacer algo similar a esto:

const Options = (props) => {

    const handleClickOption = () => {
        // some code
    }

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

Options.propTypes = {
    // validate props
};

export default Options;

Answer 2

Los componentes funcionales sin estado se beneficiarán de futuras optimizaciones de rendimiento de React específicas para estos componentes. Esta es la forma en que podemos escribir componentes como función pura:

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

export default App;

Sin embargo, si desea escribir un componente en estilo ES6, aún puede hacerlo, pero en este caso es necesario eliminar el error de eslint (si está usando eslint). El siguiente cambio en el archivo .eslintrc

P.EJ:

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

Entonces aquí, el componente de estilo ES6 que puede escribir con eslint enable:

import React, { Component } from ''react'';

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

export default Home;

Answer 3

Reaccionar 0.14 introdujo componentes de función pura.

Esta debería ser la opción preferida para todos los componentes sin estado.

function Option({ onClick, option }) {
    return (
        <li onClick={onClick}>
            {option}
        </li>
    );
}

Answer 4

Significa que declaras un componente con estado en reaccionar sin construcción. El escenario puede ser así

import React, { Component } from ''react'';

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

El código anterior es incorrecto, por lo que el código correcto debería ser así

class Something extends Component {

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

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

Answer 5

Tengo un problema similar. ¿Alguien sabe cómo llamar a un accesorio específico del componente dentro de la función de clic aprobada?

P.ej

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>
  );
}

Dentro de la función onClick necesito el element.id . Estoy buscando una solución sin usar bind()

Sé cómo hacerlo funcionar con React.createClass o extend React.Component pero no escrito como una función pura.

Editar : encontré una solución, pero no estoy seguro de si es un olor a código. :)

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>
  );
}