ELM:嵌入(HTML列表)在DIV第二个参数中的错误

Question

给定字符串列表，我想创建一个htmldiv的列表，以便将其注入视图：我想知道功能签名应如下：

display : List String ->  List Html div

和功能主体：

    display model = case model of
     [] -> []
     (x::xs) -> div [][ text x] :: display xs

按以下内容嵌入上述函数时（众所周知，div 功能将HTML的列表作为第二个参数div : List Attribute -> List Html -> Html）

view : Model -> Html Msg
   view model = div []
                  [
                    input [ placeholder "write your post here" , onInput  Change][]
                    , button [onClick Save ][text "save"]
                    ,div [][ display model.lst ]

我在编译时遇到以下错误：

  The 2nd argument to function `div` is causing a mismatch.
24|                      div [][ display model.lst ]
                               ^^^^^^^^^^^^^^^^^^^^^
Function `div` is expecting the 2nd argument to be:
    List (VirtualDom.Node a)
But it is:
    List (List (Html a))

我该如何解决，谢谢

Answer 1

有关行div [][ display model.lst ]的错误消息指出，您正在尝试将列表嵌入列表中。由于display的返回值已经是列表，因此您无需将其包装在括号中。改用此方法：

div [] (display model.lst)

然后，您会看到display的类型注释存在问题。您缺少一些括号，因为List仅采用一个类型的参数。应该是：

display : List String ->  List (Html div)

，作为旁注，在display的该签名中，您有Html div。div并不意味着它正在返回实际DIV。类型注释中的小写标签基本上意味着任何东西都可以去那里。您经常会看到人们使用短手类型的标签，例如Html a，因为输入div可能会令人困惑。另一个替代方法是与视图代码的其余部分一致，并使用Html Msg。无论哪种方式，在这种特殊情况下，都很好。这只是惯例的问题。