f# - Fable-Elmish 中的渲染组件

Question

我已经使用 dotnet new SAFE 命令设置了一个标准 SAFE 应用程序，生成了两个服务器和客户端项目(以及共享文件夹)。

Client 项目具有包含 View 函数和引导代码的 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、context、refs、updater、state} 的对象)。如果您打算渲染子集合，请改用数组。我真的不明白，因为类型是 ReactElement 应该没问题......

手动实例化组件并调用 render() 确实可以完成一些工作，但当然不会调用 componentDidMount() :

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

那么:如何正确实例化 MyComponent 并将其“注入(inject)”到 React 中？

Answer 1

您可以使用Fable.Helpers.React中的ofType

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