Question

在少数guides中，父组件中的消息处理是这样的;

type Msg
    = NavMsg Nav.Msg
    | SidebarMsg Sidebar.Msg
    | WidgetMsg Widget.Msg

父组件在更新中处理它们：

update : Msg -> AppModel -> (AppModel, Cmd Msg)
update message model =
    case message of
        WidgetMsg subMsg ->
            let
                (updatedWidgetModel, widgetCmd) =
                    Widget.update subMsg model.widgetModel
            in
                ({ model | widgetModel = updatedWidgetModel }, Cmd.map WidgetMsg widgetCmd)
        _ ->

但是，如果子组件在列表中，我找不到一种简单的方法来做同样的事情。如何判断正确的子组件对指向他的消息做出反应？

我想过将组件对象添加到消息中：

type Msg
    = MessageToParent
    | MessageToChild Child Child.Msg

但是如果Child组件很大，这似乎非常低效，并且在尝试将内部Child.Msg委派给右Child时仍然会给我带来麻烦。

处理邮件传递到组件列表的最佳方法是什么？

Answer 1

我建议使用数组（或Dict）和像这样的代码

type Msg
    = WidgetMsg Int Widget.Msg

update : Msg -> AppModel -> (AppModel, Cmd Msg)
update message model =
    case message of
        WidgetMsg idx subMsg ->
            model.widgetModels
                |> Array.get idx
                |> Maybe.map (Widget.update subMsg)
                |> Maybe.map (\(m,c) -> 
                     ({ model | widgetModels = Array.set idx m model.widgetModels }
                     , Cmd.map Widgetmsg idx c)
                     )
                |> Maybe.withDefault (model, Cmd.none)
        _ ->

在使用Elm中的小部件列表进行合成时处理消息

1 个答案: