Компонент рендеринга в Fable-Elmish

Question

Я установил стандартное безопасное приложение с dotnet new SAFE команда, приводящая к двум проектам сервера и клиента (и к общей папке).

В клиентском проекте есть файл Client.fs с функцией view и загрузочным кодом, который генерирует шаблон:

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 } []