为什么我得到 ESLint - 组件应该写成一个纯函数？

Question

我收到此 eslint 错误，仅适用于应用程序组件“组件应编写为纯函数”，我不确定为什么。

我检查了其他有此错误的帖子，none 的解决方案似乎有效。

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;

Answer 1

您的组件不包含状态，但您使用的是支持状态的表单。在这种情况下可以避免扩展 React.Component 带来的一些开销。

只要把你的class改成

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

为什么我得到 ESLint - 组件应该写成一个纯函数？

Why am i getting ESLint - Component should be written as a pure function?

javascript

reactjs

eslint

eslint-config-airbnb