如何从Elm中的组件调用父味精?

尤金·马特维耶夫(Eugene Matveyev)

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

因此,我不能直接从我的孩子那里叫“ CloseModal”-Elm不允许我给其他人打电话。我有什么选择?


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

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

半斑马

简而言之,您不能将消息直接从子级传递到父级或同级。

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

我已经做了一个简单的亲子沟通示例,将其嵌入答案中太大了,因此在这里我仅会指出关键点。

孩子

子组件定义了一组消息

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功能中,我们可以对所需的消息进行模式匹配并对它们做出反应。

其余消息将通过默认分支

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:翻译模式示例在我的待办事项上,如果您想让我用它来更新答案,请发表评论。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在父组件中调用函数

来自分类Dev

如何从子组件调用父组件中的事件?

来自分类Dev

从子组件中调用父组件函数

来自分类Dev

如何从使用DCL loadintolocation()加载的子组件中调用父组件中的事件

来自分类Dev

我的子组件如何在Angular 2中的父组件上调用方法?

来自分类Dev

如何通过React中子组件的onchange事件调用父类组件中的函数?

来自分类Dev

在React的子组件中调用父函数

来自分类Dev

如何从blazor的父组件调用子组件方法?

来自分类Dev

子组件中的 ondragend 事件调用父组件方法

来自分类Dev

如何在react-native中从子组件(带有参数)调用父函数?

来自分类Dev

在Ember中完成Ember.run.later之后,如何确保子组件调用父函数

来自分类Dev

如何在 ReactJS 中使用参数正确调用父组件中的事件处理函数?

来自分类Dev

如何从子组件在父组件中渲染路线组件

来自分类Dev

如何从对象味精中检索变量?

来自分类Dev

如何在父Vue中触发组件?

来自分类Dev

如何访问在父模块中声明的组件

来自分类Dev

如何访问子组件中的父数据

来自分类Dev

在父组件中的Angular MatStepper上调用子验证器

来自分类Dev

从Ember 2.x中的父组件进行的调用操作

来自分类Dev

在Web Dynpro Java中调用父组件方法

来自分类Dev

如何在父组件中访问子组件的引用

来自分类Dev

如何从angular2中的子组件更新父组件

来自分类Dev

当父组件中的表单提交时,如何使子组件更新

来自分类Dev

如何在Angular 9中从子组件访问父组件

来自分类Dev

ReactJS:如何访问父组件中的所有子组件?

来自分类Dev

如何使在子组件中修改的值对父组件可用?

来自分类Dev

如何在子组件中修改父组件的导航选项?

来自分类Dev

如何在父组件中为共享组件提供 routerLink

来自分类Dev

如何在 ReactJS 的父组件中获取子组件的 ref

Related 相关文章

  1. 1

    如何在父组件中调用函数

  2. 2

    如何从子组件调用父组件中的事件?

  3. 3

    从子组件中调用父组件函数

  4. 4

    如何从使用DCL loadintolocation()加载的子组件中调用父组件中的事件

  5. 5

    我的子组件如何在Angular 2中的父组件上调用方法?

  6. 6

    如何通过React中子组件的onchange事件调用父类组件中的函数?

  7. 7

    在React的子组件中调用父函数

  8. 8

    如何从blazor的父组件调用子组件方法?

  9. 9

    子组件中的 ondragend 事件调用父组件方法

  10. 10

    如何在react-native中从子组件(带有参数)调用父函数?

  11. 11

    在Ember中完成Ember.run.later之后,如何确保子组件调用父函数

  12. 12

    如何在 ReactJS 中使用参数正确调用父组件中的事件处理函数?

  13. 13

    如何从子组件在父组件中渲染路线组件

  14. 14

    如何从对象味精中检索变量?

  15. 15

    如何在父Vue中触发组件?

  16. 16

    如何访问在父模块中声明的组件

  17. 17

    如何访问子组件中的父数据

  18. 18

    在父组件中的Angular MatStepper上调用子验证器

  19. 19

    从Ember 2.x中的父组件进行的调用操作

  20. 20

    在Web Dynpro Java中调用父组件方法

  21. 21

    如何在父组件中访问子组件的引用

  22. 22

    如何从angular2中的子组件更新父组件

  23. 23

    当父组件中的表单提交时,如何使子组件更新

  24. 24

    如何在Angular 9中从子组件访问父组件

  25. 25

    ReactJS:如何访问父组件中的所有子组件?

  26. 26

    如何使在子组件中修改的值对父组件可用?

  27. 27

    如何在子组件中修改父组件的导航选项?

  28. 28

    如何在父组件中为共享组件提供 routerLink

  29. 29

    如何在 ReactJS 的父组件中获取子组件的 ref

热门标签

归档