wie zu lösen Komponente sollte als ein reiner Funktionsfehler in eslint-react geschrieben werden?

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

Ich benutze eslint-config-airbnb, um den obigen Code zu überprüfen, und es zeigt mir einen Fehler msg wie Component sollte als eine reine Funktion geschrieben werden.

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

Danke für Ihre Hilfe.

Answer 1

Wenn Sie eine „dumme“ Komponente (keinen internen Zustand, Lifecycle Methoden, etc.), können Sie es als einfache JavaScript-Funktion im Gegensatz schreiben können React.CreateClass oder streck React.Component zu verwenden.

Überprüfen Sie die Dokumentation here für allgemeine Informationen über reine Funktionen als Komponenten und here für spezifische Informationen zu context.

So in Ihrem Fall:

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

ich einige gefälschte Requisiten verwenden diesen Fehler zu umgehen:

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

Sie auch die ES6 Weg versuchen könnte:

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;