javascript - funcional - ESLint-El componente debe escribirse como una función pura(reaccionar preferir/sin estado)

programacion funcional javascript ejemplos

Question

ESLint me está dando este error en un proyecto de reacción.

ESLint - El componente debe escribirse como una función pura (reaccionar preferir / sin estado)

Apunta a la primera línea del componente.

export class myComponent extends React.Component {
render() {
    return (

      //stuff here

    );
  }
}

¿Cómo me deshago de este error?

Answer 1

Añadir constructor () como:

exports class myComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>Hello</div>
    );
  }
}

Answer 2

Dos opciones.

Desactivar temporalmente la advertencia

^{(No probado, y hay varias formas de hacerlo).}

// eslint-disable-next-line react/prefer-stateless-function
export class myComponent extends React.Component {
  ...
}

Utilice un componente sin estado puro

El valor de retorno es lo que se procesará (por ejemplo, básicamente está escribiendo el método de render del componente basado en clase):

export const myComponent = () => {
  return (
    // JSX here
  )
}

(O usa una notación que no sea ES6 si eso es lo tuyo).

Para componentes como este sin otra lógica de soporte, prefiero el retorno implícito, por ejemplo,

export MyComponent = () =>
  <div>
    // Stuff here
  </div>

Esta es una cuestión de preferencia. Sin embargo, diría que debe seguir las convenciones de nomenclatura de React y mantener todos los componentes comenzando con una letra mayúscula.

^{ESLint puede quejarse de la falta de parens alrededor de las expresiones JSX de varias líneas, así que desactive esa regla o use parens.}

Si necesita accesorios, se pasan como argumento a la función:

const MyComponent = (props) =>
  <div>
    <Something someProp={props.foo} />
  </div>

export MyComponent

Y puede desestructurar en el parámetro como de costumbre por conveniencia:

const MyComponent = ({ foo }) =>
  <div>
    <Something someProp={foo} />
  </div>

Esto puede hacer que la devolución implícita sea un poco más fácil si estuviera usando vars locales. Recibirá una advertencia de ESLint sobre los PropTypes faltantes a menos que los declare; Ya que no es una clase, simplemente no se pueden usar static propTypes de static propTypes en la clase, deben adjuntarse a la función (que muchas personas prefieren de todos modos).

Answer 3

Escriba su componente como una función sin estado:

export myComponent = () => { //stuff here };

En realidad, existen dos estilos de definir componentes en React: componentes funcionales (que son solo funciones de apoyos a un componente React) y componentes de clase.

La principal diferencia entre ellos es que los componentes de la clase pueden tener métodos de state y de ciclo de vida como componentDidMount , componentDidUpdate , etc.

Siempre que no necesite métodos de estado del ciclo de vida, debe escribir su componente como una función sin estado, ya que los componentes sin estado en general son más fáciles de razonar.

Para escribir un componente funcional, escribe una función que toma un solo argumento. Este argumento recibirá los apoyos del componente. En consecuencia, no usa this.props para acceder a las this.props del componente, solo usa el argumento de la función.

Answer 4

Recibirá este error solo cuando su clase no tenga ningún método o constructor de ciclo de vida. Para resolver esto, debe deshabilitar la propiedad de la pelusa o hacerlo como una función pura o crear un constructor para la clase.

Answer 5

Si confía en los props , entonces hay una forma mejor (algo discutible, en el momento de esta escritura) de corregir este error sin escribir las funciones sin estado: escribiendo un PureComponent y utilizando esta regla de eslint [source] :

"react/prefer-stateless-function": [2, { "ignorePureComponents": true }],

Con la regla anterior, el siguiente fragmento de código es válido (ya que depende de los props )

class Foo extends React.PureComponent {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

El equipo React planea construir optimizaciones alrededor de SFC pero aún no están ahí. Entonces, hasta que eso suceda, SFCs no ofrecerá ningún beneficio sobre PureComponents . De hecho, serán un poco peores, ya que no evitarán rendimientos innecesarios.

Answer 6

Si todo lo que está haciendo es representar una plantilla jsx y no declarar el estado con el constructor(props) , debe escribir su componente como una función pura de props y no usar la palabra clave class para definirlo.

ex.

export const myComponent = () => (
   // jsx goes here  
);

Answer 7

const myComponent = () => {
return (
  //stuff here

  );
};

export default myComponent;

Y en el archivo app.js solo importa este componente como lo hacemos para clases como

import myComponent from ''./myComponent.js''

y llamar como

<myComponent />

Funcionará seguro.