Fable-Elmish 中的渲染组件

Question

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

Client 项目有 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 并"injected"进入 React？

Answer 1

您可以使用 Fable.Helpers.React

中的 ofType

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

Fable-Elmish 中的渲染组件

Render component in Fable-Elmish

f#

fable-f#

elmish