Feliz: Dalam dokumentasi untuk komponen Elmish dan Elmish menyertakan pemanggilan dari kode utama.

Dibuat pada 11 Mar 2021  ·  7Komentar  ·  Sumber: Zaid-Ajaj/Feliz

Jika Anda baru mengenal Feliz maka memiliki kode untuk memanggil gaya Elmish akan berguna, misalnya pada 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)
        ]
    ]
)

Tidak jelas bagaimana Anda akan memanggilnya dari main, apakah Anda perlu menggunakan sesuatu seperti makeElmishprogram atau hanya menggunakan ReactComponent seperti:

module Main

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

importAll "./styles/global.scss"

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

Semua 7 komentar

Mungkin juga perlu disebutkan ketika pertama kali berbicara tentang useElmish daripada yang harus diinstal dengan dotnet add package Feliz.UseElmish hanya semuanya mengalir lebih baik daripada menemukan referensi yang hilang.

Anda memang hanya akan memanggil komponen reaksi dan kait useElmish akan menangani loop pengiriman

Pertimbangkan untuk menggunakan hal-hal baru dari Fabel 3

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

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

Saya akan segera memperbarui dokumen ke Fabel 3 bit terbaru dan membahas poin-poin yang membingungkan

Ya, saya baru saja membaca dokumen ketika saya mencoba meraba-raba dengan Elmish :-/

@Zaid-Ajaj Pertanyaan terakhir untuk hari ini :-) Saat menggunakan Feliz.Router apakah masih harus menggunakan Program.mkProgram ?

Tidak, tidak ada Program global, hanya komponen React seperti komponen Router.router dari paket Feliz.Router. Lihat repo SAFE.React untuk lebih banyak contoh :)

@7sharp9 Saya telah memperbarui React Elmish Components ke Fable 3 bit dan menambahkan lebih banyak bit tentang array dependensi dan pembuangan sumber daya. Silakan lihat dan beri tahu saya jika ada yang aneh atau membingungkan.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat