Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Почему я получаю ESLint - компонент должен быть написан как чистая функция?

Автор вопроса: Adrian SultuОтветов: 1

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

Я проверил другие сообщения с этой ошибкой, и ни одно из решений не работает.

import React from "react";
import { Switch, Route } from "react-router-dom";
import NotFound from "../Pages/Standalone/NotFoundDedicated";
import Auth from "./Auth";
import Application from "./Application";

import LoginDedicated from "../Pages/Standalone/LoginDedicated";
import ArticleNews from "./ArticleNews";
import ThemeWrapper, { AppContext } from "./ThemeWrapper";
window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;

class App extends React.Component {
  render() {
    return (
      <ThemeWrapper>
        <AppContext.Consumer>
          {changeMode => (
            <Switch>
              <Route path="/" exact component={LoginDedicated} />
              <Route
                path="/app"
                render={props => <Application {...props} changeMode={changeMode} />}
              />
              <Route
                path="/blog"
                render={props => <ArticleNews {...props} changeMode={changeMode} />}
              />
              <Route component={Auth} />
              <Route component={NotFound} />
            </Switch>
          )}
        </AppContext.Consumer>
      </ThemeWrapper>
    );
  }
}

export default App;
  • Это не ошибка, а предупреждение. У вас есть компонент на основе класса, который имеет только рендеринг и никогда не использует this, поэтому вы можете переписать его как функциональный компонент без состояния. function App() { return (/* render return value goes here */)} Yury Tarabanko 09.07.2020
  • Поскольку ваш компонент, похоже, не имеет никаких значений состояния, использование классов считается излишним. Попробуйте преобразовать его в функциональный (чистый) компонент: reactjs.org/docs/components-and -props.html Treycos 09.07.2020

reactjsjavascripteslinteslint-config-airbnb

Ответы

Ответ 1 · рейтинг -1 · Deadron

Ваш компонент не содержит состояния, но вы используете форму, которая поддерживает состояние. Расширение React.Component связано с некоторыми накладными расходами, которых в данном случае можно избежать.

Просто измените свой класс, чтобы он выглядел как

function App(props) {
    return (
        <ThemeWrapper>
        <AppContext.Consumer>
          {changeMode => (
            <Switch>
              <Route path="/" exact component={LoginDedicated} />
              <Route
                path="/app"
                render={props => <Application {...props} changeMode={changeMode} />}
              />
              <Route
                path="/blog"
                render={props => <ArticleNews {...props} changeMode={changeMode} />}
              />
              <Route component={Auth} />
              <Route component={NotFound} />
            </Switch>
          )}
        </AppContext.Consumer>
      </ThemeWrapper>
    );
}

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы