如何将Html.Html消息转换为Html.Html消息

Question

我正试图在Elm中编写一个TabControl，如下所示

module TabControl exposing (..)
import Html 
import Html.Attributes as Attributes
import Html.Events
import Array
type Msg
= OnSelectedTabChanged
| NoOp
type alias Model msg =
{ tabs : List (Tab msg)
, selectedIndex : Int    
}
constructor : Model msg
constructor =
{ tabs = []
, selectedIndex = 0
}
type alias Tab msg =
{ title : String
, content : Html.Html msg 
}
withTab : Tab msg -> Model msg -> (Model msg)
withTab tab model = 
{ model | tabs = model.tabs ++ [tab] }
render : Model msg -> Html.Html msg
render model =
let 
header = renderTabHeaders model
content = renderSelectedTabContent model
in
Html.div [] [ header, content ]
renderTabHeaders : Model msg -> Html.Html msg
renderTabHeaders model =
Html.div []    
[
Html.ul []        
(
model.tabs 
|> List.map ((tab) -> renderTabHeader tab)           
)
]
renderTabHeader : Tab msg -> Html.Html msg
renderTabHeader tab =
Html.li [Html.Events.onClick OnSelectedTabChanged] [Html.text tab.title]                        
renderSelectedTabContent : Model msg -> Html.Html msg
renderSelectedTabContent model =
let 
array = 
Array.fromList model.tabs
item = 
Array.get model.selectedIndex array
in
case item of 
Just value ->
value.content
Nothing ->
Html.text ""

由呈现

module Main exposing (..)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import TabControl
main =
Browser.sandbox { init = 0, update = update, view = view }
view model =
div []  
[  
TabControl.constructor
|> TabControl.withTab (TabControl.Tab "title 1" (Html.text "html 1"))
|> TabControl.withTab (TabControl.Tab "title 2" (Html.text "html 2"))
|> TabControl.render
]

然而，我似乎无法得到正确的返回类型。

如果我将renderTabHeader : Tab msg -> Html.Html msg重构为renderTabHeader : Tab msg -> Html.Html Msg，则

Something is off with the body of the `renderTabHeaders` definition:
This `div` call produces:
Html.Html Msg
But the type annotation on `renderTabHeaders` says it should be:
Html.Html msg

如果我不这样做，那么

Something is off with the body of the `renderTabHeader` definition:
This `li` call produces:
Html.Html Msg
But the type annotation on `renderTabHeader` says it should be:
Html.Html msg

如果我让每个函数都返回Html.Html-Msg，那么

Something is off with the 1st branch of this `case` expression:
67|                 value.content
^^^^^^^^^^^^^
The value at .content is a:
Html.Html msg
But the type annotation on `renderSelectedTabContent` says it should be:
Html.Html Msg

如何在div中包含元素，其中一些返回Html.Html msg，另一些返回Html.Html Msg？或者，我如何在Html.Html msg和Html.Html Msg之间转换

Answer 1

如果要公开Msg类型，则需要模块的用户提供一个函数，将Msg转换为msg。

因此，如果顶级Msg类型如下所示：

type Msg
= NoOp
| TabControlMsg TabControl.Msg
| SomethingElse

然后render可以接受一个接受TabControl.Msg并返回Msg的函数，在本例中，它将是TabControlMsg构造函数。

view model =
div []  
[  
TabControl.constructor
|> TabControl.withTab (TabControl.Tab "title 1" (Html.text "html 1"))
|> TabControl.withTab (TabControl.Tab "title 2" (Html.text "html 2"))
|> TabControl.render TabControlMsg
]

然后，您将调整模块中的代码以使用该功能：

render : (Msg -> msg) -> Model msg -> Html.Html msg
render toMsg model =
let 
header = renderTabHeaders model
content = renderSelectedTabContent toMsg model
in
Html.div [] [ header, content ]
renderSelectedTabContent : (Msg -> msg) -> Model msg -> Html.Html msg
renderSelectedTabContent toMsg model =
let 
array = 
Array.fromList model.tabs
item = 
Array.get model.selectedIndex array
in
case item of 
Just value ->
Html.map toMsg value.content
Nothing ->
Html.text ""

Answer 2

啊。。这样我就可以映射value.content来返回类似的消息

renderSelectedTabContent : Model msg -> Html.Html Msg
renderSelectedTabContent model =
let 
array = 
Array.fromList model.tabs
item = 
Array.get model.selectedIndex array
in
case item of 
Just value ->
Html.map (_ -> NoOp) value.content
Nothing ->
Html.text ""