首页 > 代码库 > [Recompose] Add Local State to a Functional Stateless Component using Recompose
[Recompose] Add Local State to a Functional Stateless Component using Recompose
Learn how to use the ‘withState‘ and ‘withHandlers‘ higher order components to easily add local state to—and create a reusable local state pattern for—your functional stateless components. No need for classes!
withState:
const Statue = withState(‘show‘, ‘toggleShow‘, false)( ({ status, show, toggleShow }) => (<span onClick={() => toggleShow((val) => !val)}> {status} {show && <StatusList/>} </span>));
withState, we create a variable ‘show‘ and a function ‘toggleShow‘, the default value for ‘show‘ is false. Now the variable and function are injected into our stateless component as props.
The function ‘toggleShow‘ can just take a value as arguement or it can also take function as an arguement.
take as function:
onClick={() => toggleShow((val) => !val)}take as value:
onClick={() => toggleShow(!show)}
withHandlers & compose:
To make withState more reuseable, we can use ‘withHandler‘ & ‘compose‘ to create an HoC.
const withToggle = compose( withState(‘toggleState‘, ‘toggleShow‘, false), withHandlers({ toggle: ({toggleShow}) => (e) => toggleShow((val) => !val), show: ({toggleShow}) => (e) => toggleShow(true), hide: ({toggleShow}) => (e) => toggleShow(false) }));const Statue = withToggle( ({ status, toggle, toggleState }) => (<span onClick={() => toggle(!toggleState)}> {status} {toggleState && <StatusList/>} </span>));const Tooltip = withToggle(({ show, hide, toggleState, text, children }) => ( <span> <span> {toggleState && <div style={TooltipStyle}> { text } </div>} <span onm ouseOver={show} onm ouseOut={hide} > { children } </span> </span> </span>));
[Recompose] Add Local State to a Functional Stateless Component using Recompose
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。