为什么我得到 ESLint - 组件应该写成纯函数？ [复制]答案

【问题标题】：Why am i getting ESLint - Component should be written as a pure function? [duplicate]为什么我得到 ESLint - 组件应该写成纯函数？ [复制]
【发布时间】：2026-02-25 07:10:01
【问题描述】：

我收到此 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 */)}
由于您的组件似乎没有任何状态值，因此使用类被认为是矫枉过正。尝试将其转换为功能（纯）组件：reactjs.org/docs/components-and-props.html

标签： javascript reactjs eslint eslint-config-airbnb

【解决方案1】：

您的组件不包含任何状态，但您使用的是支持状态的表单。在这种情况下可以避免扩展 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>
    );
}

【讨论】：