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

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

0 голосов
/ 03 декабря 2018

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

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

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 (найдено: объект с ключами {реквизиты, контекст, ссылки, обновления, состояние}).Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив. Я действительно не понимаю этого, поскольку типом является ReactElement, что должно быть хорошо ...

Создание экземпляра компонента вручную и вызов render() выполняет какую-то работу, но, конечно, componentDidMount() не вызывается: 

let myComponent = MyComponent({data = 42})
myComponent.render()

Итак: Как правильно настроить MyComponent и «внедрить» его в React?

1 Ответ

0 голосов
/ 03 декабря 2018

Вы можете использовать ofType из Fable.Helpers.React

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