Как мне переписать реагирующий компонент с помощью декораторов как чистую функцию?

Я использую настройки eslint airbnb, которые имеют правило, которое заставляет компоненты реакции без состояния быть переписанными как чистая функция. Следующий компонент запускает это правило, а это означает, что компонент ниже лучше было бы написать как чистую функцию:

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 и невозможно выполнить оба правила?


reactjs javascript airbnb
person vkjb38sjhbv98h4jgvx98hah3fef    schedule 14.09.2016    source источник

Ответы (1)


arrow_upward
15
arrow_downward

Итак, проблема в декораторах стиля 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);

Это некрасиво, но работает и не вызывает никаких ошибок.

person vkjb38sjhbv98h4jgvx98hah3fef    schedule 14.09.2016
comment
Это правильно, в предложении декораторов нет концепции декораторов функций, только декораторы классов и свойств. Так что это действительно идиоматический способ компонентов функции декоратора (кстати, он работает и для классов) - person mweststrate; 18.09.2016
comment
Знаете, почему был сделан этот выбор? Выглядит странно, что можно аннотировать класс и методы, но не функции. - person cglacet; 21.02.2019