elm - 如何从 Elm 中的组件调用父消息？

Question

我有一个模态窗口，可以在其中显示不同的组件。每个组件都有自己的更新程序和消息，但我想在它们之间共享一个关闭按钮。

因此我不能直接从我的孩子那里调用“CloseModal”——Elm 不允许我调用其他人的消息。我有哪些选择？

---

我以为我可以调用“Modal.Update.update Modal.Messages.CloseModal”，但在我的组件内部我只有一个状态块。所以这不是一个选择。

然后我找到了一种将消息从父母传递给孩子的方法，但它并不能帮助我以其他方式传递消息。或者给兄弟姐妹。

Answer 1

简而言之，您不能将消息直接从孩子传递给父母或兄弟姐妹。

Elm Architecture 实现了单向消息传递，换句话说，您的父组件总是在子组件收到消息之前知道子组件的消息。

我做了一个简单的亲子交流示例，太大了，无法将其嵌入到答案中，因此我将在这里仅说明要点。

孩子

子组件定义了一组 Messages：

type Msg
    = Update Model
    | Focus
    | Blur

在它的update函数中，我们忽略了用于父组件的消息。

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Update value ->
            ( value, Cmd.none )

        -- Ignore the rest of the messages.
        _ ->
            ( model, Cmd.none )

家长

在 parent 的update函数中，我们可以对所需消息进行模式匹配并对它们做出反应。

其余消息将通过default 分支。

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NameMsg childMsg ->
            case childMsg of
                {- We have intercepted a message from child component.
                   This part of the update function might be moved
                   to a separate function for better readability.
                -}
                Input.Focus ->
                    update (HelperMsg Helper.Show) model

                Input.Blur ->
                    update (HelperMsg Helper.Hide) model

                -- The default message passing routine.
                _ ->
                    let
                        ( nameModel, nameCmd ) =
                            Input.update childMsg model.name
                    in
                        ( { model | name = nameModel }
                        , Cmd.map NameMsg nameCmd
                        )

上面的例子总结了孩子-父母和兄弟姐妹的交流。您可以根据需要对任何组件的任何消息递归地运行更新函数。

从孩子的update功能发送消息

Cmd.Extra公开了一个发送消息的函数。

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model ->
    (model, message SomeMessage)

PS：翻译模式示例在我的待办事项中，如果您希望我用它更新答案，请发表评论。