Wie löst man die `Komponente sollte als eine reine Funktion` Fehler in eslint-react geschrieben werden?

Question

Ich verwende eslint-config-airbnb, um den obigen Code zu überprüfen, und es zeigt mir einen Fehler msg wie Component should be written as a pure function.

Also, wie man die obige Komponente in reine Funktion ändert?

Danke für Ihre Hilfe.

Answer 1

React 0.14 führte reine Funktionskomponenten ein.

Dies sollte die bevorzugte Option für alle zustandslosen Komponenten sein.

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

Answer 2

Ich habe ein ähnliches Problem. Weiß jemand wie man eine komponentenspezifische Requisite innerhalb der übergebenen Klick-Funktion aufruft?

z.

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

Innerhalb der onClick Funktion brauche ich die element.id. Ich bin auf der Suche nach einer Lösung ohne bind()

Ich weiß, wie man es mit oder extend React.Component arbeiten, aber nicht als reine Funktion geschrieben.

Bearbeiten: Eine Lösung gefunden, aber ich bin mir nicht sicher, ob es ein Code-Geruch ist. :)

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

Answer 3

In ES6 Sie etwas ähnliches wie dies tun könnte:

const Option = (props) => { 

    handleClickOption() { 
     // some code 
    } 

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

Option.propTypes = { 
    // validate props 
}; 

export default Options; 

Answer 4

Die Stateless funktionalen Komponenten aus zukünftigen speziell für diese Komponenten reagieren Performance-Optimierungen profitieren. Hier ist die Art, wie wir Komponente als reine Funktion schreiben:

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

 
export default App;

Allerdings, wenn Sie in ES6 Stil schreiben Komponente möchten, können Sie noch tun, aber in diesem Fall ist der eslint Fehler sein müssen entfernt (wenn Sie eslint verwenden). Die folgende Änderung in .eslintrc Datei

z.B:

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

Dann hier ES6 Stil Komponente, die Sie mit eslint schreiben aktivieren:

import React, { Component } from 'react'; 
 

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

 
export default Home;