ESLint - Komponent powinien być napisany jako funkcja czysta (funkcja preferuj/bezpaństwowa)

Question

ESLint podaje ten błąd w projekcie reagowania.

ESLint - składnik powinien być zapisany jako czysty funkcji (reagują wolą/funkcja bezstanowy)

Wskazuje pierwszej linii komponentu.

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

     //stuff here 

    ); 
    } 
} 

Jak pozbyć się tego błędu?

Answer 1

Dwie opcje.

Tymczasowe wyłączenie ostrzegania(Nietestowane, istnieje wiele sposobów, aby to zrobić)

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

zapisać go jako czysty bezstanowym komponentu

Zwracana wartość jest wykorzystywana jako render metoda komponentu klasowego:

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

(lub użyć notacji non-ES6 jeśli to twoja sprawa.)

Dla części tak z żadnym innym logiki nośnej Wolę niejawny zwrot, np

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

Jest to kwestia preferencji. Powiedziałbym, że powinieneś przestrzegać konwencji React nazewnictwa i zachować wszystkie elementy zaczynające się od dużej litery.

Jeśli potrzebują podpory, są one przekazywane jako argument do funkcji:

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

export MyComponent 

I można destructure w parametrze:

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

To może sprawić, że niejawny zwróci trochę łatwiej, jeśli używasz lokalnych zmiennych.

Answer 2

Wpisz swój składnik jako bezpaństwowiec funkcji:

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

Są to właściwie dwa style definiowania składników w React: elementy funkcjonalne (które są tylko funkcje z rekwizytów do komponentu React) oraz komponenty klasy.

Główną różnicą między nimi jest to, że składniki klasa może mieć state cyklu życia i metod, takich jak componentDidMount, componentDidUpdate itp

Kiedy nie trzeba stan metod cyklu życia, należy wpisać składnik jako bezpaństwowiec funkcja, ponieważ bezpaństwowe komponenty są ogólnie łatwiejsze do zrozumienia.

Aby napisać komponent funkcjonalny, należy napisać funkcję, która przyjmuje pojedynczy argument. Ten argument otrzyma rekwizyty komponentu. W związku z tym nie używasz this.props, aby uzyskać dostęp do rekwizytów komponentu - wystarczy użyć argumentu funkcji.

Answer 3

Jeśli wszystko, co robisz, to renderowanie szablonu jsx, a nie deklarowanie stanu za pomocą constructor(props), to powinieneś napisać swój komponent jako czystą funkcję rekwizytów i nie używać słowa kluczowego class do zdefiniowania tego.

np.

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

Answer 4

Ten błąd pojawia się tylko wtedy, gdy klasa nie ma metody lub konstruktora cyklu życia. Aby rozwiązać ten problem, musisz wyłączyć właściwość lint lub uczynić ją jako czystą funkcję lub utworzyć konstruktor dla klasy.

Answer 5

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

); 
}; 

export default myComponent; 

I app.js pliku prostu zaimportować ten składnik jak robimy dla klasy jak

import myComponent from './myComponent.js' 

i zadzwoń jak

<myComponent /> 

To zadziała na pewno.