ESLint - компонент должен быть записан как чистая функция (реагировать на предпочтение/функция без гражданства)

Ответ 1

Два варианта

Временно отключить предупреждение

^{(Не проверено, и есть несколько способов сделать это.)}

// eslint-disable-next-line react/prefer-stateless-function
export class myComponent extends React.Component {
  ...
}

Используйте чистый компонент без сохранения состояния

Возвращаемое значение - это то, что будет отображено (например, вы в основном пишете метод render компонента на основе класса:

export const myComponent = () => {
  return (
    // JSX here
  )
}

(Или используйте нотацию не-ES6, если это ваша вещь.)

Для таких компонентов без другой поддерживающей логики я предпочитаю неявный возврат, например

export MyComponent = () =>
  <div>
    // Stuff here
  </div>

Это вопрос предпочтений. Я бы сказал, что вы должны следовать соглашениям об именах React, и все компоненты должны начинаться с заглавной буквы.

^{ESLint может жаловаться на пропущенные скобки вокруг многострочных выражений JSX, поэтому отключите это правило или используйте скобки.}

Если вам нужны реквизиты, они передаются в качестве аргумента функции:

const MyComponent = (props) =>
  <div>
    <Something someProp={props.foo} />
  </div>

export MyComponent

И вы можете для удобства деструктурировать параметр как обычно:

const MyComponent = ({ foo }) =>
  <div>
    <Something someProp={foo} />
  </div>

Это может сделать неявный возврат немного проще, если вы используете локальные переменные. Вы получите предупреждение ESLint о пропущенных PropTypes если не объявите их; Так как это не класс, вы не можете просто использовать static propTypes в классе, они должны быть присоединены к функции (которую многие люди предпочитают в любом случае).

Ответ 2

Напишите свой компонент как функцию без сохранения:

export myComponent = () => { //stuff here };

На самом деле существуют два стиля определения компонентов в React: функциональные компоненты (которые являются просто функциями от реквизита к компоненту React) и компоненты класса.

Основное различие между ними состоит в том, что компоненты класса могут иметь state и методы жизненного цикла, такие как componentDidMount, componentDidUpdate и т.д.

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

Чтобы написать функциональный компонент, вы пишете функцию, которая принимает один аргумент. Этот аргумент получит реквизиты компонента. Следовательно, вы не используете this.props для доступа к компонентным реквизитам - вы просто используете аргумент функции.

Ответ 3

Если вы полагаетесь на props, то есть лучший (несколько спорный, на момент написания) способ исправить эту ошибку без написания функций без сохранения состояния - написав PureComponent и используя это правило eslint [source]:

"react/prefer-stateless-function": [2, { "ignorePureComponents": true }],

С вышеупомянутым правилом следующий фрагмент действителен (так как это зависит от props)

class Foo extends React.PureComponent {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

Команда React планирует построить оптимизацию вокруг SFC, но они еще не готовы. Поэтому до тех пор, пока это не произойдет, SFCs не будут предлагать никаких преимуществ по сравнению с PureComponents. На самом деле, они будут немного хуже, поскольку они не будут препятствовать расточительным рендерам.

Ответ 4

Добавить конструктор() как:

exports class myComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>Hello</div>
    );
  }
}

Ответ 5

Если все, что вы делаете, это рендеринг jsx-шаблона, а не объявление состояния с constructor(props), тогда вы должны написать свой компонент как чистую функцию реквизита, а не использовать ключевое слово class для его определения.

ех.

export const myComponent = () => (
   // jsx goes here  
);

Ответ 6

Вы получите эту ошибку только в том случае, если у вашего класса нет метода или конструктора жизненного цикла. Чтобы решить это, вы должны отключить свойство lint или сделать его как чистую функцию или создать конструктор для класса.

Ответ 7

const myComponent = () => {
return (
  //stuff here

  );
};

export default myComponent;

И в файле app.js просто импортируйте этот компонент так же, как мы делаем для класса, например

import myComponent from './myComponent.js'

и вызывается как

<myComponent />

Это будет работать точно.

Ответ 8

export class myComponent extends PureComponent {
  ...
}