2021/8/24 HalogenでComponentの入れ子

親Component内で子Componentを使おうとすると面倒になってくる

最初の例

code:purs(hs)

module Main where

import Prelude

import Halogen as H

import Halogen.HTML as HH

parent :: forall query input output m. H.Component query input output m

parent =

H.mkComponent

{ initialState: identity

, render

, eval: H.mkEval H.defaultEval

}

where

render :: forall state action. state -> H.ComponentHTML action () m

button :: forall w i. { label :: String } -> HH.HTML w i

これは親はComponentだが、子のbuttonはただ画のHTML型

何も考えなくても実装できる基本の基本

buttonをComponentに変える

code:purs(hs)

type Input = { label :: String }

type State = { label :: String }

button :: forall query output m. H.Component query Input output m

button =

H.mkComponent

{ initialState

, render

, eval: H.mkEval H.defaultEval

}

where

initialState :: Input -> State

initialState input = input

render :: forall action. State -> H.ComponentHTML action () m

子を書き換えただけでは親が型エラーになる

parent側も修正が必要

button単体で見れば完全なComponentになっている

問題は親とのやりとり

子から親へアクセスすることができるので、ひと手間必要になる

parentにslotを与える

code:purs(hs)

import Type.Proxy (Proxy(..))

type Slots = ( button :: forall query. H.Slot query Void Int )

_button = Proxy :: Proxy "button"

parent :: forall query input output m. H.Component query input output m

parent =

H.mkComponent

{ initialState: identity

, render

, eval: H.mkEval H.defaultEval

}

where

-- render :: forall state action. state -> H.ComponentHTML action () m

render :: forall state action. state -> H.ComponentHTML action Slots m

初期のstateなどを渡している

reactで言えばpropsを渡しているのと同じ感覚

それよりも若干ダルい