F# Fable Elmish中的渲染组件

我使用

dotnet new SAFE

命令设置了一个标准的SAFE应用程序，生成了两个服务器和客户端项目（以及共享文件夹）

客户机项目有一个Client.fs文件，其中包含view函数和引导代码，这与模板生成的代码相同：

Program.mkProgram init update view
#if DEBUG
|> Program.withConsoleTrace
|> Program.withHMR
#endif
|> Program.withReact "elmish-app"
#if DEBUG
|> Program.withDebugger
#endif
|> Program.run

我现在添加了一个简单的组件：

type MyComponentProps = {
    data : int
}

type MyComponent(initialProps) =
    inherit Component<MyComponentProps, obj>(initialProps)
    do
      base.setInitState({ data = initialProps.data })

    override this.render() =
        h1 [] [str ("Hello World " + this.props.data.ToString())]

    override this.componentDidMount() =
        // Do something useful here... ;)
        console.log("Component Did Mount!")

但这会导致浏览器陷入现在令人恐惧的境地：

错误：对象作为React子对象无效（找到：具有键{props，context，refs，updater，state}的对象）。如果要呈现子对象集合，请改用数组。我真的不明白，因为类型是ReactElement，应该可以

手动实例化组件并调用

render（）

会做一些工作，但当然不会调用

componentDidMount（）

：

let myComponent = MyComponent({data = 42})
myComponent.render() 

---

那么：如何将MyComponent正确实例化并“注入”到React中？

您可以使用Fable.Helpers.React中类型为的

open Fable.Helpers.React
let view (model : Model) (dispatch : Msg -> unit) =
    ofType<MyComponent,_,_> { data = 42 } []

打开Fable.Helpers.React
let视图（模型：模型）（调度：消息->单元）=
ofType{data=42}[]
谢谢！您可以通过声明这两个分别是道具和状态类型来改进答案。
open Fable.Helpers.React
let view (model : Model) (dispatch : Msg -> unit) =
    ofType<MyComponent,_,_> { data = 42 } []