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

ELM：在div第二个参数

1 个答案: