Purescript Halogen:我可以请求也是 parent 的 child 组件的状态吗?
Purescript Halogen: can I request the state of child component that is also a parent?
如果我有一个祖父母、一个child组件和一个祖child组件,祖父母可以请求child的状态吗?我试过像 here 一样使用 "request" 但是当你请求 child 的状态时类型不匹配,它也有自己的 child .当我请求没有 children.
的 child 状态时,指南中的示例工作正常
错误是:
Could not match type
Query
with type
Coproduct (Coproduct Query (ChildF AnswerSlot Query)) Query
是的,绝对是。您可能只是在 child 的查询中遗漏了 left
- 这是必需的,因为 child 的查询代数将采用 Coproduct f (ChildF p f')
的形式,它具有拥有 child.
相应地,您也可以从祖父母那里查询祖父母 child,方法是使用 right
并使用祖父母 child 的适当值构造 ChildF
。
我整理了一个查询 child 和 grandchild 的人为示例,希望它能让事情变得更清楚:
module Main where
import Prelude
import Data.Functor.Coproduct (Coproduct, left, right)
import Data.Maybe (Maybe(..), fromMaybe)
import Debug.Trace (traceA) -- from purescript-debug
import Halogen as H
import Halogen.HTML as HH
--------------------------------------------------------------------------------
type GrandState = Unit
data GrandQuery a = AskGrandChild (String -> a)
grandchild :: forall g. H.Component GrandState GrandQuery g
grandchild = H.component { render, eval }
where
render :: GrandState -> H.ComponentHTML GrandQuery
render _ = HH.div_ []
eval :: GrandQuery ~> H.ComponentDSL GrandState GrandQuery g
eval (AskGrandChild k) = pure $ k "Hello from grandchild"
--------------------------------------------------------------------------------
type ChildState = Unit
data ChildQuery a = AskChild (String -> a)
type GrandSlot = Unit
type ChildState' g = H.ParentState ChildState GrandState ChildQuery GrandQuery g GrandSlot
type ChildQuery' = Coproduct ChildQuery (H.ChildF GrandSlot GrandQuery)
child :: forall g. Functor g => H.Component (ChildState' g) ChildQuery' g
child = H.parentComponent { render, eval, peek: Nothing }
where
render :: ChildState -> H.ParentHTML GrandState ChildQuery GrandQuery g GrandSlot
render _ = HH.slot unit \_ -> { component: grandchild, initialState: unit }
eval :: ChildQuery ~> H.ParentDSL ChildState GrandState ChildQuery GrandQuery g GrandSlot
eval (AskChild k) = pure $ k "Hello from child"
--------------------------------------------------------------------------------
type ParentState = Unit
data ParentQuery a = Something a
type ChildSlot = Unit
type ParentState' g = H.ParentState ParentState (ChildState' g) ParentQuery ChildQuery' g ChildSlot
type ParentQuery' = Coproduct ParentQuery (H.ChildF ChildSlot ChildQuery')
parent :: forall g. Functor g => H.Component (ParentState' g) ParentQuery' g
parent = H.parentComponent { render, eval, peek: Nothing }
where
render :: ParentState -> H.ParentHTML (ChildState' g) ParentQuery ChildQuery' g ChildSlot
render _ = HH.slot unit \_ -> { component: child, initialState: H.parentState unit }
eval :: ParentQuery ~> H.ParentDSL ParentState (ChildState' g) ParentQuery ChildQuery' g ChildSlot
eval (Something next) = do
-- note the `left` here
childAnswer <- H.query unit $ left $ H.request AskChild
traceA $ fromMaybe "child not found" $ childAnswer
grandAnswer <- H.query unit $ right $ H.ChildF unit $ H.request AskGrandChild
traceA $ fromMaybe "grandchild not found" $ grandAnswer
pure next
如果我有一个祖父母、一个child组件和一个祖child组件,祖父母可以请求child的状态吗?我试过像 here 一样使用 "request" 但是当你请求 child 的状态时类型不匹配,它也有自己的 child .当我请求没有 children.
的 child 状态时,指南中的示例工作正常错误是:
Could not match type
Query
with type
Coproduct (Coproduct Query (ChildF AnswerSlot Query)) Query
是的,绝对是。您可能只是在 child 的查询中遗漏了 left
- 这是必需的,因为 child 的查询代数将采用 Coproduct f (ChildF p f')
的形式,它具有拥有 child.
相应地,您也可以从祖父母那里查询祖父母 child,方法是使用 right
并使用祖父母 child 的适当值构造 ChildF
。
我整理了一个查询 child 和 grandchild 的人为示例,希望它能让事情变得更清楚:
module Main where
import Prelude
import Data.Functor.Coproduct (Coproduct, left, right)
import Data.Maybe (Maybe(..), fromMaybe)
import Debug.Trace (traceA) -- from purescript-debug
import Halogen as H
import Halogen.HTML as HH
--------------------------------------------------------------------------------
type GrandState = Unit
data GrandQuery a = AskGrandChild (String -> a)
grandchild :: forall g. H.Component GrandState GrandQuery g
grandchild = H.component { render, eval }
where
render :: GrandState -> H.ComponentHTML GrandQuery
render _ = HH.div_ []
eval :: GrandQuery ~> H.ComponentDSL GrandState GrandQuery g
eval (AskGrandChild k) = pure $ k "Hello from grandchild"
--------------------------------------------------------------------------------
type ChildState = Unit
data ChildQuery a = AskChild (String -> a)
type GrandSlot = Unit
type ChildState' g = H.ParentState ChildState GrandState ChildQuery GrandQuery g GrandSlot
type ChildQuery' = Coproduct ChildQuery (H.ChildF GrandSlot GrandQuery)
child :: forall g. Functor g => H.Component (ChildState' g) ChildQuery' g
child = H.parentComponent { render, eval, peek: Nothing }
where
render :: ChildState -> H.ParentHTML GrandState ChildQuery GrandQuery g GrandSlot
render _ = HH.slot unit \_ -> { component: grandchild, initialState: unit }
eval :: ChildQuery ~> H.ParentDSL ChildState GrandState ChildQuery GrandQuery g GrandSlot
eval (AskChild k) = pure $ k "Hello from child"
--------------------------------------------------------------------------------
type ParentState = Unit
data ParentQuery a = Something a
type ChildSlot = Unit
type ParentState' g = H.ParentState ParentState (ChildState' g) ParentQuery ChildQuery' g ChildSlot
type ParentQuery' = Coproduct ParentQuery (H.ChildF ChildSlot ChildQuery')
parent :: forall g. Functor g => H.Component (ParentState' g) ParentQuery' g
parent = H.parentComponent { render, eval, peek: Nothing }
where
render :: ParentState -> H.ParentHTML (ChildState' g) ParentQuery ChildQuery' g ChildSlot
render _ = HH.slot unit \_ -> { component: child, initialState: H.parentState unit }
eval :: ParentQuery ~> H.ParentDSL ParentState (ChildState' g) ParentQuery ChildQuery' g ChildSlot
eval (Something next) = do
-- note the `left` here
childAnswer <- H.query unit $ left $ H.request AskChild
traceA $ fromMaybe "child not found" $ childAnswer
grandAnswer <- H.query unit $ right $ H.ChildF unit $ H.request AskGrandChild
traceA $ fromMaybe "grandchild not found" $ grandAnswer
pure next