如何在 Fable F# 的结果视图中动态添加 HTML 控件？

Question

我试图理解当您像这样创建 elmish/fable 项目时生成的第一个项目：dotnet new fable-react-elmish:

let view (model: Model) dispatch =
   let resultView =
       match model.downloaded with
       | Ok r ->
           h3 [ Style [CSSProp.Color "blue"] ] [ str r ] 
       | Error er ->
           h3 [ Style [CSSProp.Color "red"] ] [ str er ]

   div [] [
       h1 [] [ str "React Elmish demo" ]
       
       button [ OnClick (fun _ -> dispatch OnDownloadClicked) ] [ str "Download" ]
       button [ OnClick (fun _ -> dispatch ResetClicked) ] [ str "Reset" ]
       div [] [ h2 [] [ str "Download result:" ]; resultView ]
   ]

我了解到每次调用函数OnDownloadClicked或ResetClick时，<h3>HTML控件显示为[=的最后一个控件26=] 页，覆盖旧页。（可能整个页面都重新加载了，但我不确定）

但是我要如何修改上面的示例才能在每次调用 OnDownloadClicked 函数时将新的 <h3> 元素添加到视图中？换句话说：我希望所有以前显示的 <h3> 元素都保留在视图中。欢迎任何提示（也包括指向示例的提示）。

Answer 1

根据代码判断，类型 Model 必须是一个类似于以下内容的记录：

type Model = {
   ...
   downloaded: Result<string, string>
   ...
}

作为 OnDownloadClicked 消息的结果，必须在 update 函数中更新此 downloaded 字段。

这些是我根据您在此处显示的内容（view 函数）所做的假设，但我不确定，因为您没有显示代码的那些部分。

无论如何，假设假设是正确的，您可以只保留 Result<string, string> 个值的历史记录，而不仅仅是最后一个。为此，修改 Model 类型以保存它们的列表：

type Model = {
   ...
   downloadHistory: list<Result<string, string>>
   ...
}

然后让您的 update 函数将最新值附加到列表而不是用它替换字段。

然后在您的 view 函数中，您可以通过将 resultView 函数映射到 downloadHistory 列表来生成 h3 标签列表：

  let resultView r =
    match r with 
      ...

  ...
  div [] (h2 [] [ str "Download result:" ] :: List.map resultView model.downloadHistory)

如何在 Fable F# 的结果视图中动态添加 HTML 控件？

How can I add a HTML control dynamically to the result view in Fable F#?

f#

fable-f#

elmish