सजावटी के साथ एक शुद्ध समारोह के रूप में मैं एक प्रतिक्रिया घटक कैसे लिखूं?

Question

मैं airbnb एस्लिंट सेटिंग्स का उपयोग कर रहा हूं, जिसमें a rule that enforces stateless react components to be rewritten as a pure function है। निम्नलिखित घटक इस नियम, जिसका अर्थ है कि नीचे घटक बेहतर एक शुद्ध समारोह के रूप में लिखा जाएगा चलाता है:

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

हालांकि, जब मैं एक शुद्ध समारोह के रूप में यह फिर से लिखने (नीचे देखें), मुझे लगता है कि 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, 
}; 

तो क्या मैं इसे एक शुद्ध घटक के रूप में लिख सकता हूं और अभी भी सजावटी को संलग्न कर सकता हूं? या क्या यह airbnb linting नियमों में एक गलती है और क्या दोनों नियमों को संतुष्ट करना असंभव है?

Answer 1

ठीक है, तो समस्या es7 शैली सजावट है। उन्हें परेशान करने से समस्या हल हो जाती है:

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

यह सुंदर नहीं है, लेकिन यह काम करता है और यह किसी भी त्रुटि को ट्रिगर नहीं करता है।