如何使用裝飾器重寫反應組件作為純函數？

Question

我正在使用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,
};

那么我可以將它編寫為純組件並仍然附加裝飾器嗎？ 或者這是airbnb linting規則中的一個錯誤，是否不可能滿足這兩個規則？

Answer 1

好的，問題是es7樣式裝飾器。 Desugaring他們解決了這個問題：

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

它不漂亮，但它確實有效，並且不會觸發任何錯誤。