如何用decorator重写一个反应组件作为纯函数？

Question

我正在使用airbnb eslint设置，其中有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短缺规则中的错误，是不可能同时满足这两个规则的？

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

这并不美观，但它确实有效，并且不会触发任何错误。