ELM:在div第二个参数中嵌入(HTML列表)时出错

Question

给定一个String列表,我想创建一个HTML div列表,以便将其注入视图中:我想知道函数签名应如下所示:

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.无论哪种方式,在这种特殊情况下,都很好; 这只是一个惯例问题.