0

我试图了解当您创建一个像这样的 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 控件作为 HTML 页面的最后一个控件，覆盖旧的控件。（可能整个页面都重新加载了，但我不确定）

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

4

1 回答 1

1

从代码来看，类型Model必须是如下所示的记录：

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

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

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

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

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

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

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

  let resultView r =
    match r with 
      ...

  ...
  div [] (h2 [] [ str "Download result:" ] :: List.map resultView model.downloadHistory)
于 2021-03-22T19:05:42.000 回答