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"
)
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.