Javascript 我可以将React.Component子类添加到ESLint规则中吗？

我正在做一个项目，用Webpacker构建一个ES6 React应用程序。我们使用ESLint通过一些预提交挂钩保持脚本整洁，但有一个问题我还没有解决。我们使用了两个

React.Component

子类，它们没有被ESLint检测为

Components

示例组件：

/*AsyncComponent.jsx*/
导出默认类AsyncComponent扩展React.Component{
//子类将定义_render（）而不是render（）
render（）{
if（this.isLoaded（））{
这个；
}
}
//必须由子类定义的“虚拟”函数
//isLoaded（）{}
//加载（）{}
//_render（）{}
}

/*MyComponent.jsx*/
导出默认类MyComponent扩展异步组件{
//这是可行的，但ESLint不会将其解析为组件
//定义我们的“虚拟”异步组件函数
isLoaded（）{}
加载（）{}
_render（）{}
}

我的问题：我想知道是否可以将ESLint配置为将

AsyncComponent

子类，如

MyComponent

检测为

React.Component

子类，并将相同的规则应用于其他

组件

附加问题：这可能会导致此特定示例使用的

\u render（）

方法出现问题，因此，如果我可以重写eslint react规则，以期望

\u render（）

而不是

AsyncComponent

子类中的

render（）

，这也会很有帮助

来自

package.json的相关依赖项

：

"eslint": "^5.11.1",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.2",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react-redux": "^3.0.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "^6.0.0",
"redux": "^4.0.1",

来自

.eslintrc

的相关配置：

"extends": [
  "airbnb",
  "plugin:react-redux/recommended",
  "plugin:promise/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
  "ecmaVersion": 8,
  "ecmaFeatures": {
    "experimentalObjectRestSpread": true,
    "impliedStrict": true,
    "classes": true
  }
},
"env": {
  "browser": true,
  "node": true,
  "jquery": true,
  "jest": true
},
"plugins": [
  "react-redux",
  "promise"
],

---

我不确定你想达到什么目的。我想您可以尝试返回super.render（）

---

但是扩展这样的组件是一个坏主意，因为上面说使用钩子、HOC或renderProps模式来处理这类东西，我知道这可能会让人困惑，特别是如果你来自“OO”背景，但是采用你所做的方法会带来更多麻烦。

感谢@fard的建议。我试着用错误的方式做这件事。。。似乎是实现我在这里试图实现的目标的正确方法。

您不应该用另一个组件来扩展一个组件-使用组合而不是继承。你的方法真的很肮脏（而且会很难维护）-你应该改为使用HoC。ESLint没有将它们检测为组件意味着什么？如果有错误，请把它贴出来。

render() {
    if (this.isLoaded()) {
      super.render()
    }
  }