如何将类组件实现的WithProvider HOC转换为函数式HOC？

没问题，把类组件版本的WithProvider转成函数式非常直接，逻辑完全不变，只是把类组件替换成函数式组件即可。转换后的代码如下：

import React from "react"
import Context from "./context"

const WithProvider = Component => {
  // 用函数式组件替代原有的类组件
  const WithContext = (props) => {
    return (
      <Context.Provider value={{ type: props.type }}>
        <Component {...props} />
      </Context.Provider>
    )
  }

  return WithContext
}

export default WithProvider

关键说明： #

• 原类组件里的constructor完全可以去掉，因为函数式组件直接通过参数接收props，不需要额外做初始化操作
• 整个逻辑和原来的类组件版本保持一致：依然将传入的type props注入到Context Provider的value中，同时把所有props透传给被包裹的目标组件
• 如果之后需要给这个HOC添加状态逻辑，直接使用useState、useReducer等React Hook即可，完美适配你的函数式组件代码库

内容的提问来源于stack exchange，提问作者Ala Eddine Menai