Как решить "Компонент должен быть записан как ошибка чистой функции в eslint-реакции?

class Option extends React.Component {
  constructor(props) {
    super(props);
    this.handleClickOption = this.handleClickOption.bind(this);
  }
  handleClickOption() {
    // some code
  }
  render() {
    return (
      <li onClick={this.handleClickOption}>{this.props.option}</li>
    );
  }
}

Я использую eslint-config-airbnb, чтобы проверить приведенный выше код, и он покажет мне сообщение об ошибке, например Component should be written as a pure function.

Итак, как изменить вышеуказанный компонент на чистую функцию?

Спасибо за вашу помощь.

Ответы

Ответ 1

Реакция 0.14 ввела чистые функциональные компоненты.

Это должно быть предпочтительным вариантом для всех компонентов без сохранения состояния.

function Option({ onClick, option }) {
    return (
        <li onClick={onClick}>
            {option}
        </li>
    );
}

Ответ 2

В ES6 вы можете сделать что-то похожее на это:

const Options = (props) => {

    const handleClickOption = () => {
        // some code
    }

    return (
        <li onClick={handleClickOption}>{props.myOptionsListItem}</li>
    );
};

Options.propTypes = {
    // validate props
};

export default Options;

Ответ 3

Функциональные компоненты Stateless получат выгоду от будущих оптимизаций производительности React, характерных для этих компонентов. Здесь мы можем написать компонент как чистую функцию:

const App = () => {
  return (
    <div>
      <h2 id="heading">Hello ReactJS </h2>
      <header />
    </div>
  );
};

export default App;

Ответ 4

Это означает, что вы объявляете компонент с состоянием в реагировать без конструкции. Сценарий может быть таким

import React, { Component } from 'react';

class Something extends Component {
   render() {
      return (
        <div>Your classes</div>
      )
   }
}

Выше код неправильный, поэтому правильный код должен быть таким

class Something extends Component {

   constructor(props) {
      super(props);
      this.props = props;
   }

   render() {
      return (
        <div>Your classes</div>
      )
   }
}

Ответ 5

У меня похожая проблема. Кто-нибудь знает, как вызвать специфическую для компонента опору внутри переданной функции щелчка.

Например

function ElementRow({onClick, element, key}) {
  return (
    <tr key={key}>
      <td><a href="#" onClick={onClick}>Delete</a></td>
      <td>
        ...
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}

Внутри onClick функции мне нужно element.id. Я ищу решение без использования bind()

Я знаю, как заставить его работать с React.createClass или extend React.Component но не писать как чистую функцию.

Изменить: нашел решение, но я не уверен, если это запах кода. :)

function ElementRow({ onClick, element, key }) {
  const _onClick = (e) => {
    onClick(e, element.id);
  };

  return (
    <tr key={key}>
      <td><a href="#" onClick={_onClick}>Delete</a></td>
      <td>
        ...
      </td>
      <td>{ element.first } { element.last }</td>
    </tr>
  );
}