HTML可选属性

Question

在给出此html的情况下，如果containerClassName是可选的String

div
    [ class containerClassName ]
    []

我如何使其成为可选内容？

例如，如果containerClassName是""，则省略该属性，以便得到的DOM不包括没有值的属性class。

Answer 1

其中一种选择是使用Html.Attributes中的classList函数，如果某个条件为True，则该函数包括一个类：

div
    [ classList
        [ (containerClassName, not (String.isEmpty containerClassName))
        ]
    ]
    []

Answer 2

Elm/core具有著名的Maybe类型，可用于对“可选”行为进行建模。因此，您的containerClassName应该是Maybe String类型。

然后，您将需要一个包装class函数并接受Maybe String的函数。

maybeClass: Maybe String -> List(Html.Attribute msg)
maybeClass maybeClassName =
    case maybeClassName of
        Just className ->
            [class className]
        Nothing ->
            []

您将像这样使用此新功能

div
    [] ++ (maybeClass containerClassName)
    []

请注意，我选择返回List类型而不返回单个Attribute，因为Elm中没有'null'类型，但是有一个空列表，当您在列表中附加一个空列表将满足您的需求。