반응 구성 요소를 데코레이터로 다시 작성하는 방법은 무엇입니까?

Question

나는 a rule that enforces stateless react components to be rewritten as a pure function이있는 airbnb eslint 설정을 사용하고 있습니다. 다음 구성 요소는 아래의 구성 요소가 더 순수 함수로 기록 될 것이라는 점을 의미한다이 규칙, 트리거 : 그러나

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

그럼 순수한 구성 요소로 작성하고 꾸미기를 첨부 할 수 있습니까? 아니면 에어 비앤비 링틴 규정의 실수입니까? 두 규칙 모두를 만족시키는 것이 불가능합니까?

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

꽤 좋지는 않지만 작동하며 오류를 유발하지 않습니다.