重构 withState 如何更新 props 更改

2024-05-07

我有一个更高阶的组件,我尝试对其进行一些修改(我不熟悉重组)。

这就是我的组件:

<Map mycenter={mycenter}  />

如果 mycenter 更新,我希望地图组件更新或重新渲染。我正在尝试修改代码https://github.com/istarkov/google-map-thousands-markers/blob/master/src/Map.js 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 }})
    }
  })
)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

重构 withState 如何更新 props 更改 的相关文章

随机推荐