Jan*_*zub 5 f# fable-f# elmish
我需要使用带有 elmish 调度的 Fable-React 有状态组件。我不知道如何创建它。
我正在使用这个项目模板:https : //github.com/fable-elmish/templates
这是模型:
module Home.Types
[<Pojo>]
type Model = {
isLoading: bool
}
Run Code Online (Sandbox Code Playgroud)
这是组件:
type Documentation(props) as this =
inherit Component<Documentation.Types.Model,obj>(props)
do
()
override this.componentWillMount () =
printfn "componentWillMount"
**RequestProcessDocumentation |> dispatch <-- this is what I need**
override this.render() =
printfn "render"
let (?) = Fable.Core.JsInterop.(?)
div []
[
p [] [str(this.props.isLoading.ToString())]
button [ OnClick (fun _ -> RequestProcessDocumentation |> dispatch ) ] [str("Click me")]
]
Run Code Online (Sandbox Code Playgroud)
如何使用 ofType 函数创建它,然后我可以像这样使用它:
let pageHtml =
function
| Home -> Home.View.root model.home (HomeMsg >> dispatch)
| Documentation -> documentation (DocumentationMsg >>
Run Code Online (Sandbox Code Playgroud)
我将调度函数添加到 props 中:
[<Pojo>]
type Model = {
isLoading: bool
processDocumentation: ProcessDocumentationDto
valuesForFilterDropdown: DropdownFilterValues
scopeOfFilter: ScopeOfFilter
expandedMenuItemsIds: string list
}
[<Pojo>]
type DocumentationProps = {
model: Model
dispatch: Msg -> unit
}
Run Code Online (Sandbox Code Playgroud)
创建视图:
let root model dispatch =
let inline documentation props = ofType<Documentation,_,_> props []
let pageHtml =
function
| Home -> Home.View.root model.home (HomeMsg >> dispatch)
| Documentation -> documentation { model.documentation with dispatch = (DocumentationMsg >> dispatch)}
Run Code Online (Sandbox Code Playgroud)
然后我这样称呼它:
RequestProcessDocumentation |> this.props.dispatch
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
562 次 |
最近记录: |