打字稿中的 React HOC 组件给出警告（从非打字稿转换）答案

【问题标题】：React HOC component in typescript gives warnings (converting from non-typescript)打字稿中的 React HOC 组件给出警告（从非打字稿转换）
【发布时间】：2020-02-16 04:30:21
【问题描述】：

我在 react + typescript 中有以下简单的 HOC 组件。

export const withFirebase = <P extends object>(
  Component: React.ComponentType<P>
) =>
  class WithFirebase extends React.Component<P> {
    render() {
      return (
        <FirebaseContext.Consumer>
          {firebase => <Component {...this.props} firebase={firebase} />}
        </FirebaseContext.Consumer>
      )
    }
  }

export default FirebaseContext

我正在将此组件从非类型脚本转换为打字稿函数，但 ESlint 给了我以下错误：缺少函数返回类型。我在这里想念什么？我应该以不同的方式编写我的 HOC 组件吗？

【问题讨论】：

标签： javascript reactjs typescript create-react-app higher-order-components

【解决方案1】：

试图在函数上提供返回类型？

export const withFirebase = <P extends object>(
  Component: React.ComponentType<P>
): React.ComponentType<P> =>

【讨论】：

你也可以考虑关闭这个 eslint 规则："@typescript-eslint/explicit-function-return-type": "off"
谢谢！这样可行。我想知道为什么它也会在渲染功能上给我这个错误。也许我只需要在我的规则中将其关闭，因为 eslint 似乎很渴望。想知道这里的最佳做法是什么
很可能它希望渲染函数也有明确的返回参数。像这样的东西：render(): ReactNode {
最佳实践是将显式类型放在从上下文中返回类型不明显的任何地方。此规则强制将其绝对放在任何地方，这可能会使您的代码过于冗长。
非常感谢您提供的信息！我现在知道了。只是想知道为什么它甚至在这一行 {firebase => } (firebsae =>) 上给我一个警告。但我会确保我的 eslint 不是那么严格