Bir tepkisel bileşeni, dekoratörlerle nasıl salt işlev olarak yeniden yazarım?

Question

a rule that enforces stateless react components to be rewritten as a pure function numaralı airbnb eslint ayarlarını kullanıyorum. Aşağıdaki bileşeni aşağıda bileşen daha iyi bir saf fonksiyonu olarak yazılabilir anlamına gelir bu kuralı tetikler: Ancak

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

, ben saf bir fonksiyonu olarak yeniden yazmak, hatasını Leading decorators must be attached to a class declaration olsun (aşağıya bakınız) :

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

Bu yüzden, onu salt bir bileşen olarak yazabilirim ve yine de dekoratörler ekleyebilir miyim? Yoksa bu, airbnb ıslatma kurallarındaki bir hatadır ve her iki kurala da uymak imkansız mıdır?

Answer 1

Tamam, bu yüzden sorun es7 stili dekoratörlerdir. Onları Desugaring sorunu çözer: Güzel değil

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

, ama çalışır ve herhangi bir hata tetiklemez.