4

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 中？

4

1 回答 1

3

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

open Fable.Helpers.React
let view (model : Model) (dispatch : Msg -> unit) =
    ofType<MyComponent,_,_> { data = 42 } []
于 2018-12-03T19:10:33.707 回答