![](/img/trans.png)
[英]How to test the handlers in withHandlers, branch and withState of recompose with enzyme?
[英]recompose withState how to update on props changes
我有一个尝试修改的高阶组件(我不熟悉重组)。
这就是我的组件:
<Map mycenter={mycenter} />
如果mycenter已更新,我希望地图组件更新或重新渲染。 我正在尝试从https://github.com/istarkov/google-map-thousands-markers/blob/master/src/Map.js修改代码
我对代码做了一些修改。 首先,将地图中心设置为mycenter。 这样可行。
withState('mapParams', 'setMapParams', ({ mycenter }) => ({ center:mycenter, zoom: 12 })),
之后,用户可以单击某处,中心将被修改
withHandlers({
onMapParamsChange: ({ setMapParams }) => ({ center, zoom, bounds }) => {
setMapParams({ center, zoom, bounds });
console.log('setMapParams', { center, zoom });
},
如果更新了“ mycenter”,是否有办法重新发布组件或更新中心?
当前,最好的方法是使用生命周期。 初始状态( ({ mycenter }) => ({ center:mycenter, zoom: 12 })
的回调仅发生一次。
const enhanceMap = compose(
withState('mapParams', 'setMapParams', ({ mycenter }) => ({ center: mycenter, zoom: 12 })),
withStateHandlers({...}),
lifecycle({
componentWillUpdate(nextProps) {
if (this.props.mycenter !== nextProps.mycenter)
this.setState({mapParams: { center: nextProps.mycenter, zoom: 12 }})
}
})
)
希望这不会太晚。
我发现变换道具的状态有点混乱。
现在,recompose允许您将函数作为withProps方法的参数发送。 您可以执行以下操作:
withProps( props => ({
mycenter: props.mycenter,
zoom: 12,
}))
这样,您可以将道具传播到组件,并且只要道具发生更改,它就会更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.