0
내 목표는 시작시 Purescript Thermite 구성 요소를 채우기 위해 원격 API를 호출하는 것입니다.이를 위해 componentDidMount 이벤트 처리기가 직접 필요하지 않습니다. 테르밋 볼 수 있지만 낮은 수준에 의해 노출되어PureScript Thermite 구성 요소에 componentDidMount 이벤트 수신기 추가
그래서 나는 componentDidMount 이벤트 리스너를 추가 할 createReactSpec 기능을 사용하려고 Purescript이 - 반작용 바인딩 반응하지만 난 엄격한 형식을 포함하는 형식이 일치를 얻을 수 변수 이해 (나는 purescript/haskell에 아주 새로운 것이다).
module Main where
import Prelude
import Control.Monad.Eff (Eff)
import DOM (DOM) as DOM
import DOM.HTML (window) as DOM
import DOM.HTML.Document (body) as DOM
import DOM.HTML.Types (htmlElementToElement) as DOM
import DOM.HTML.Window (document) as DOM
import Data.Foldable (traverse_)
import React (ComponentDidMount, createClass, createFactory, transformState)
import React.DOM as R
import ReactDOM (render)
import Thermite as T
-- MAIN
main :: Eff (dom :: DOM.DOM) Unit
main = myMain componentSpec initialState unit
-- | A default implementation of `main` which renders a component to the document body.
myMain :: forall s p a eff . T.Spec eff s p a -> s -> p -> Eff (dom :: DOM.DOM | eff) Unit
myMain spec initialState props = void do
let reactSpec = (T.createReactSpec spec initialState).spec { componentDidMount = onMount }
let component = createClass reactSpec
document <- DOM.window >>= DOM.document
container <- DOM.body document
traverse_ (render (createFactory component props) <<< DOM.htmlElementToElement) container
onMount :: forall props eff . ComponentDidMount props State eff
onMount ctx = transformState ctx (\st -> st { status = "mounted" })
-- STATE
type State = { status :: String }
initialState :: State
initialState = { status: "nothing" }
-- COMPONENT STRUCTURE
componentSpec :: T.Spec _ State _ _
componentSpec = T.simpleSpec performAction render where
render :: T.Render State _ _
render dispatch _ s _ = [
R.div' [ R.text (s.status) ]
]
performAction :: T.PerformAction _ State _ _
performAction _ _ _ = void (T.cotransform (\state -> state { status = "something happened"}))
그리고 오류 메시지 :
Error found:
in module Main
at src/Main.purs line 25, column 31 - line 25, column 40
Could not match type
state4
with type
{ status :: String
}
while trying to match type ReactThis props3 state4
with type ReactThis t5
{ status :: String
}
while checking that expression reactSpec
has type { render :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, refs :: ReactRefs (() :: # Control.Monad.Eff.Effect)
, state :: ReactState
(read :: Read
)
| t2
)
ReactElement
, displayName :: String
, getInitialState :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, state :: ReactState (() :: # Control.Monad.Eff.Effect)
, refs :: ReactRefs (() :: # Control.Monad.Eff.Effect)
| t2
)
t1
, componentWillMount :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs (() :: # Control.Monad.Eff.Effect)
| t2
)
Unit
, componentDidMount :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
, componentWillReceiveProps :: ReactThis t0 t1
-> t0
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
, shouldComponentUpdate :: ReactThis t0 t1
-> t0
-> t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Boolean
, componentWillUpdate :: ReactThis t0 t1
-> t0
-> t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
, write :: Write
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
, componentDidUpdate :: ReactThis t0 t1
-> t0
-> t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
, componentWillUnmount :: ReactThis t0 t1
-> Eff
(props :: ReactProps
, state :: ReactState
(read :: Read
)
, refs :: ReactRefs
(read :: Read
)
| t2
)
Unit
}
in value declaration myMain
where props3 is a rigid type variable
state4 is a rigid type variable
t2 is an unknown type
t1 is an unknown type
t0 is an unknown type
t5 is an unknown type