重新組合withState如何更新道具變更

Question

我有一個嘗試修改的高階組件（我不熟悉重組）。

這就是我的組件：

<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”，是否有辦法重新發布組件或更新中心？

Answer 1

當前，最好的方法是使用生命周期。 初始狀態（ ({ 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,
}))

這樣，您可以將道具傳播到組件，並且只要道具發生更改，它就會更新。