Wie schreibe ich eine Reaktionskomponente mit Decorators als reine Funktion neu?

Question

Ich verwende die Airbnb-Eslint-Einstellungen, die a rule that enforces stateless react components to be rewritten as a pure function haben. Die folgende Komponente löst diese Regel, was bedeutet, dass die Komponente unten wäre besser als eine reine Funktion geschrieben werden:

import React from 'react'; 
import { observer } from 'mobx-react'; 
import cssmodules from 'react-css-modules'; 

import styles from './index.css'; 
import Select from '../Select/'; 
import List from '../List/'; 

@cssmodules(styles) 
@observer 
export default class Analysis extends React.Component { 
    render() { 
    return (
     <div styleName="wrapper"> 
     <div styleName="column"> 
      <Select store={this.props.store} /> 
     </div> 
     <div styleName="column"> 
      <List store={this.props.store} /> 
     </div> 
     </div> 
    ); 
    } 
} 

Analysis.propTypes = { 
    store: React.PropTypes.object.isRequired, 
}; 

Allerdings, wenn ich es als eine reine Funktion neu schreiben (siehe unten), ich den Fehler, dass Leading decorators must be attached to a class declaration :

import React from 'react'; 
import { observer } from 'mobx-react'; 
import cssmodules from 'react-css-modules'; 

import styles from './index.css'; 
import Select from '../Select/'; 
import List from '../List/'; 

@cssmodules(styles) 
@observer 
function Analysis(props) { 
    return (
    <div styleName="wrapper"> 
     <div styleName="column"> 
     <Select store={props.store} /> 
     </div> 
     <div styleName="column"> 
     <List store={props.store} /> 
     </div> 
    </div> 
); 
} 

Analysis.propTypes = { 
    store: React.PropTypes.object.isRequired, 
}; 

Also kann ich es als reine Komponente schreiben und noch die Dekorateure anhängen? Oder ist das ein Fehler in den Airbnb-Linting-Regeln und ist es unmöglich, beide Regeln zu erfüllen?

Answer 1

Ok, also das Problem ist die es7 Stil Dekorateure. sie Entzuckern löst das Problem:

import React from 'react'; 
import { observer } from 'mobx-react'; 
import cssmodules from 'react-css-modules'; 

import styles from './index.css'; 
import Select from '../Select/'; 
import List from '../List/'; 

function Analysis(props) { 
    return (
    <div styleName="wrapper"> 
     <div styleName="column"> 
     <Select store={props.store} /> 
     </div> 
     <div styleName="column"> 
     <List store={props.store} /> 
     </div> 
    </div> 
); 
} 

Analysis.propTypes = { 
    store: React.PropTypes.object.isRequired, 
}; 

export default cssmodules(observer(Analysis), styles); 

Es ist nicht schön, aber es funktioniert und es löst keine Fehler.