Feliz: Fügen Sie in der Dokumentation für Elmish und Elmish-Komponenten den Aufruf aus dem Hauptcode hinzu.

Erstellt am 11. März 2021 · 7Kommentare · Quelle: Zaid-Ajaj/Feliz

Wenn Sie neu bei Feliz sind, wäre es praktisch, den Code zum Aufrufen des Elmish-Stils zu haben, zum Beispiel auf React Elmish Components section :

open Feliz
open Feliz.UseElmish
open Elmish

type Msg =
    | Increment
    | Decrement

type State = { Count : int }

let init() = { Count = 0 }, Cmd.none

let update msg state =
    match msg with
    | Increment -> { state with Count = state.Count + 1 }, Cmd.none
    | Decrement -> { state with Count = state.Count - 1 }, Cmd.none

let counter = React.functionComponent(fun () ->
    let state, dispatch = React.useElmish(init, update, [| |])
    Html.div [
        Html.h1 state.Count
        Html.button [
            prop.text "Increment"
            prop.onClick (fun _ -> dispatch Increment)
        ]

        Html.button [
            prop.text "Decrement"
            prop.onClick (fun _ -> dispatch Decrement)
        ]
    ]
)

Es ist nicht klar, wie Sie das von main aufrufen würden, müssten Sie so etwas wie makeElmishprogram verwenden oder einfach eine ReactComponent wie:

module Main

open Feliz
open Browser.Dom
open Fable.Core.JsInterop

importAll "./styles/global.scss"

ReactDOM.render(
    counter (),
    document.getElementById "feliz-app"
)

Quelle

7sharp9

Alle 7 Kommentare

Es könnte auch erwähnenswert sein, wenn Sie zum ersten Mal über useElmish sprechen, dass es mit dotnet add package Feliz.UseElmish installiert werden sollte, einfach alles fließt besser, als eine fehlende Referenz zu finden.

7sharp9 am 11. März 2021

Sie würden tatsächlich nur die React-Komponente aufrufen und der useElmish-Hook kümmert sich um die Dispatch-Schleife

Erwägen Sie, die neuen Sachen von Fable 3 zu verwenden

[<ReactComponent>]
let Counter() = 
  let state, dispatch = React.useElmish(...)
  Html.div [ ]

ReactDOM.render(Counter(), document.getElementById "feliz-app")

Zaid-Ajaj am 11. März 2021

👍1

Ich werde die Dokumentation bald auf die neuesten Fable 3-Bits aktualisieren und die verwirrenden Punkte ansprechen

Zaid-Ajaj am 11. März 2021

Ja, ich lese gerade die Dokumente, während ich versuche, mit Elmish herumzufummeln :-/

7sharp9 am 11. März 2021

@Zaid-Ajaj Letzte Frage für heute :-) Müssen Sie bei der Verwendung von Feliz.Router immer noch den Program.mkProgram verwenden?

7sharp9 am 11. März 2021

Nein, es gibt kein globales Programm, nur React-Komponenten wie die Router.router-Komponente aus dem Feliz.Router-Paket. Weitere Beispiele finden Sie im SAFE.React-Repo :)

Zaid-Ajaj am 11. März 2021

👍1

@ 7sharp9 Ich habe React Elmish Components auf Fable 3 Bits aktualisiert und weitere Bits über das Abhängigkeits-Array und die Ressourcenentsorgung hinzugefügt. Bitte werfen Sie einen Blick darauf und lassen Sie mich wissen, wenn etwas seltsam oder verwirrend ist.

Zaid-Ajaj am 11. März 2021

❤1

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Feliz: Fügen Sie in der Dokumentation für Elmish und Elmish-Komponenten den Aufruf aus dem Hauptcode hinzu.

Alle 7 Kommentare

Verwandte Themen