Question

我正在研究一个使用Webpacker构建ES6 React App的项目。我们正在使用ESLint通过一些预先提交的钩子使脚本保持整洁，但是有一个我无法解决的问题。我们使用了两个React.Component子类，ESLint不会将它们检测为Components。

示例组件：

/* AsyncComponent.jsx */
export default class AsyncComponent extends React.Component {
  // Sub-classes will define _render() instead of render()
  render() {
    if (this.isLoaded()) {
      this._render();
    }
  }

  // "Virtual" functions which must be defined by sub-class
  // isLoaded() {}
  // load() {}
  // _render() {}
}

/* MyComponent.jsx */
export default class MyComponent extends AsyncComponent {
  // This works, but is not parsed as a Component by ESLint

  // Define our "virtual" AsyncComponent functions
  isLoaded() {}
  load() {}
  _render() {}
}

我的问题：我想知道是否可以将ESLint配置为将AsyncComponent之类的MyComponent子类检测为React.Component子类，并应用与其他Components相同的规则。

奖励问题：：这可能会导致该示例使用的_render()方法出现问题，因此，如果我可以覆盖eslint-react规则以期望{ {1}}子类中的{1}}而不是_render()。

来自render()的相关依赖关系：

AsyncComponent

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",

Answer 1

我不确定您要达到的目标。我认为您可以尝试返回super.render（）

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

但是扩展这样的组件是一个坏主意，就像上面说的那样，使用钩子，Hocs或renderProps模式来填充这种东西，我知道这可能会造成混淆，特别是如果您来自“ OO”背景，但是您所采用的方法比它的价值要麻烦得多。

Answer 2

感谢@fard的建议。我尝试以错误的方式执行此操作... React Higher-Order Components似乎是执行此处要实现的目标的正确方法。

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

2 个答案: