Fable-Elmish 中的渲染组件答案

【问题标题】：Render component in Fable-ElmishFable-Elmish 中的渲染组件
【发布时间】：2018-12-03 15:18:06
【问题描述】：

我已经使用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 正确实例化并“注入”到 React 中？

【问题讨论】：

标签： f# fable-f# elmish

【解决方案1】：

你可以从Fable.Helpers.React使用ofType

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

【讨论】：

谢谢！您可以通过说明这两个 _s 分别是 props 和 state 的类型来改进答案。