How to make a custom HOC? about fable-react HOT 4 CLOSED

type IAddClass<'T> =
    abstract AddClass: string -> 'T

type DivComponentProps =
    { value: string; ClassName: string }
    interface IAddClass<DivComponentProps> with
        member this.AddClass c = { this with ClassName = this.ClassName + " " + c }

type SpanComponentProps =
    { text: string; ClassName: string }
    interface IAddClass<SpanComponentProps> with
        member this.AddClass c = { this with ClassName = this.ClassName + " " + c }

let enhance comp (props: #IAddClass<'props>) =
    React.ofFunction comp (props.AddClass "red")

let SpanComponent (props: SpanComponentProps) =
    React.span [
        ClassName props.ClassName
    ] [ React.str props.text ]

let DivComponent (props: DivComponentProps) =
    React.div [
        ClassName props.ClassName
    ] [ React.str props.value ]

let EnhancedDiv = enhance DivComponent
let EnhancedSpan = enhance SpanComponent

type DivComponentProps =
    { value: string; ClassName: string }

type SpanComponentProps =
    { text: string; ClassName: string }

let enhance comp (addClass: 'props->string->'props) (props: 'props) =
    React.ofFunction comp (addClass props "red")

let SpanComponent (props: SpanComponentProps) =
    React.span [
        ClassName props.ClassName
    ] [ React.str props.text ]

let DivComponent (props: DivComponentProps) =
    React.div [
        ClassName props.ClassName
    ] [ React.str props.value ]

let EnhancedDiv = enhance DivComponent (fun p c ->
    { p with ClassName = p.ClassName + " " + c })

let EnhancedSpan = enhance SpanComponent (fun p c ->
    { p with ClassName = p.ClassName + " " + c })