come risolvere il `Componente dovrebbe essere scritto come un errore di` funzione pura in 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> 
    ); 
    } 
} 

Io uso eslint-config-airbnb per controllare il codice precedente e mi mostra un messaggio di errore come Component should be written as a pure function.

Quindi, come modificare il componente precedente in pura funzione?

Grazie per il vostro aiuto.

Answer 1

React 0.14 ha introdotto componenti funzione puri.

Questa dovrebbe essere l'opzione preferita per tutti i componenti stateless.

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

Answer 2

Ho un problema simile. Qualcuno sa come chiamare un puntello componente specifico all'interno della funzione di clic passato.

E.g.

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

All'interno della funzione onClick ho bisogno del element.id. Sto cercando una soluzione senza utilizzare bind()

io so come farlo funzionare con React.createClass o extend React.Component ma non scritto come una funzione pura.

Modifica: ho trovato una soluzione ma non sono sicuro che sia un odore di codice. :)

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 si potrebbe fare qualcosa di simile a questo:

const Option = (props) => { 

    handleClickOption() { 
     // some code 
    } 

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

Option.propTypes = { 
    // validate props 
}; 

export default Options; 

Answer 4

I componenti funzionali apolidi beneficeranno futuro Reagire ottimizzazioni delle prestazioni specifiche a questi componenti. Ecco il modo in cui possiamo scrivere componente come pura funzione:

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

 
export default App;

Tuttavia, se si vuole scrivere componente in stile ES6, è ancora possibile fare, ma in questo caso l'errore eslint necessità di essere rimosso (se si utilizza eslint). la seguente modifica nel file di .eslintrc

es:

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

Poi qui ES6 componente stile si può scrivere con eslint abilitazione:

import React, { Component } from 'react'; 
 

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

 
export default Home;