Question

我已经使用dotnet new SAFE命令设置了一个标准的SAFE应用程序，从而产生了两个Server和Client项目（以及Shared文件夹）。

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？

Answer 1

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

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

寓言Elmish中的渲染组件

1 个答案: