2

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

这就是我的组件：

<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”更新，有没有办法让组件重新渲染或更新中心？

4

2 回答 2

4

目前，最好的方法是使用生命周期。初始状态 ( ({ 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 }})
    }
  })
)
于 2018-01-20T09:20:46.297 回答
2

希望这不会来得太晚。

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

现在，recompose 允许您发送一个函数作为 withProps 方法的参数。您可以执行以下操作：

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

这样，您将把道具传播到您的组件，并且每当道具更改时它都会更新。

于 2018-06-13T19:38:21.670 回答