come risolvere Component dovrebbe essere scritto come un puro errore di funzione in eslint-react?

Question

const Header = React.createClass({ 
    contextTypes: { 
    router: React.PropTypes.object.isRequired, 
    }, 

    render() { 
    return (
     <li className={this.context.router.isActive('a') ? 'active' : ''}> 
      <Link to="https://stackoverflow.com/a/">A</Link> 
     </li> 
     <li className={this.context.router.isActive('b') ? 'active' : ''}> 
      <Link to="/b/">B</Link> 
     </li> 
    ); 
    }, 
}); 

Io uso eslint-config-airbnb per controllare il codice sopra e mi mostra un errore msg come Componente dovrebbe essere scritto come una pura funzione.

Quindi, come modificare il componente precedente in pura funzione?

Grazie per il vostro aiuto.

Answer 1

Quando si dispone di un componente "stupido" (nessuno stato interno, metodi del ciclo di vita, ecc.), È possibile scriverlo come una semplice funzione javascript anziché utilizzare React.CreateClass o estendere React.Component.

Consultare i documenti here per informazioni generali sulle funzioni pure come componenti e here per informazioni specifiche su context.

Quindi nel tuo caso:

function Header(context) { 
    return (
    <li className={context.router.isActive('a') ? 'active' : ''}> 
     <Link to="https://stackoverflow.com/a/">A</Link> 
    </li> 
    <li className={context.router.isActive('b') ? 'active' : ''}> 
     <Link to="/b/">B</Link> 
    </li> 
); 
} 

Header.contextTypes = { 
    router: React.PropTypes.object.isRequired, 
} 

Answer 2

faccio uso di puntelli falsi per aggirare questo errore:

export default class NavItem extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { count: 0 }; 
    } 

    render() { 
    const { router } = this.context; 
    const { index, onlyActiveOnIndex, to, children } = this.props; 
    const isActive = router.isActive(to, onlyActiveOnIndex); 
    const LinkComponent = index ? IndexLink : Link; 
    return (
     <li className={isActive ? 'active' : ''}> 
     <LinkComponent to={to}>{children}</LinkComponent> 
     </li> 
    ); 
    } 
} 

NavItem.propTypes = { 
    children: React.PropTypes.node.isRequired, 
    index: React.PropTypes.bool, 
    onlyActiveOnIndex: React.PropTypes.bool, 
    to: React.PropTypes.oneOfType([ 
    React.PropTypes.string, 
    React.PropTypes.object, 
    ]).isRequired, 
}; 
NavItem.contextTypes = { 
    router: React.PropTypes.object, 
}; 

Answer 3

Si potrebbe anche provare il modo ES6:

const Header = (context) => (
 
    <li className={context.router.isActive('a') ? 'active' : ''}> 
 
    <Link to="https://stackoverflow.com/a/">A</Link> 
 
    </li> 
 
    <li className={context.router.isActive('b') ? 'active' : ''}> 
 
    <Link to="/b/">B</Link> 
 
    </li> 
 
); 
 

 
Header.contextTypes = { 
 
    router: React.PropTypes.object.isRequired, 
 
} 
 

 
export default Header;