Fable-Elmish中的呈现组件

Question

我使用dotnet new SAFE命令建立了一个标准的安全应用程序，产生了两个服务器和客户端项目(以及共享文件夹)。

客户端项目有带有视图函数和引导代码的Client.fs文件，就像模板生成它一样：

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!")

但是我不知道如何在view函数中正确地实例化这个组件。我真的认为这是可行的：

let view (model : Model) (dispatch : Msg -> unit) =
    MyComponent({data = 42}) :> ReactElement

但这会导致浏览器出现--现在害怕的情况：

错误:对象作为React子对象无效(找到:带有键{props、上下文、推荐、更新程序、状态}的对象)。如果您打算呈现一个子集合，请使用数组代替。我真的不明白，因为它的类型是ReactElement，它应该很好.

手动实例化组件并调用render()是一种工作，但当然不调用componentDidMount()：

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

那么:如何正确地实例化MyComponent并将其“注入”以作出反应？

Answer 1

您可以使用来自ofType的Fable.Helpers.React

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