Reactjs 如何将类HOC转换为函数HOC？

我已经使用基于组件的

类实现了一个
with provider
：

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

const WithProvider = Component => {
    class WithContext extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            return <Context.Provider value={{ type: this.props.type }} >
                <Component {...this.props} />
            </Context.Provider>
        }
    }
    return WithContext
}

export default WithProvider

从“React”导入React
从“/Context”导入上下文
const with provider=组件=>{
类WithContext扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回
}
}
返回上下文
}
使用提供程序导出默认值

但是代码库中的所有组件都是基于函数的

因此，我想将
与context
转换为一个。
HOC的功能形式如下所示：

const withFoo = (Component) => {
  return (props) => {
    return <Component foo={'foo!'} {...props} />
  };
}

const Bar = withFoo((props) => {
  return <div>hello: {props.foo} bar: {props.bar}</div>
})

constwithfoo=（组件）=>{
返回（道具）=>{
返回
};
}
const Bar=withFoo（（道具）=>{
return hello:{props.foo}bar:{props.bar}
})

您可以很容易地根据自己的需要暗示此示例。
HOC的功能形式如下所示：

const withFoo = (Component) => {
  return (props) => {
    return <Component foo={'foo!'} {...props} />
  };
}

const Bar = withFoo((props) => {
  return <div>hello: {props.foo} bar: {props.bar}</div>
})

constwithfoo=（组件）=>{
返回（道具）=>{
返回
};
}
const Bar=withFoo（（道具）=>{
return hello:{props.foo}bar:{props.bar}
})

你可以很容易地根据自己的需要暗示这个例子。
如果你有一个
useState
hook，我们称之为：在闭包之前还是在它里面？我在这两种情况下都有错误。我通过添加闭包的名称解决了问题，如下所示：
return Foo=props=>{..}
。如果您有一个
useState
钩子，我们将其称为：闭包之前还是内部？这两种情况我都有错误。我通过添加闭包的名称解决了这个问题，如下所示：
returnfoo=props=>{..}
。