recompose withState如何更新道具变更

Question

我有一个更高阶的组件，我试着修改一下(我不熟悉recompose)。

这就是我的组件：

<Map mycenter={mycenter}  />

如果mycenter被更新，我希望map-component更新或重新渲染。我正在尝试修改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“更新的情况下重新渲染组件或更新中心？

Answer 1

目前，最好的方式是使用lifecycle。初始状态(({ 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 }})
    }
  })
)

Answer 2

希望这不要来得太晚。

我发现将道具转换为状态有点混乱..

现在，recompose允许您将函数作为withProps方法的参数发送。你可以这样做：

withProps( props => ({
  mycenter: props.mycenter,
  zoom: 12,
}))

这样，你就可以将你的道具向下传播到你的组件，当道具发生变化时，它就会更新。