Question

目前我有两个组件（一个容器组件和一个表示组件）。我有一些逻辑应该在componentDidMount和componentWillReceiveProps生命周期方法中实现，特别是我必须在那里发布一些操作。

现在，我将这些动作创建者映射到mapDispatchToLinkProps函数中，然后将它们传递给我的演示组件props并使用connect函数，然后我将它们调用componentDidMount和componentWillReceiveProps方法。以下是我实施它的方法：

容器组件：

const mapDispatchToLinkProps = (dispatch, ownProps) => {
  return {
    onMount: () => {
      dispatch(loadRooms(ownProps.floor))
    },
    onPropsReception: (nextProps, currentProps) => {
      if (nextProps.floor != currentProps.floor) {
        dispatch(loadRooms(nextProps.floor))
      }
    }
  }
}

演示组件：

export default connect(mapStateToProps, mapDispatchToLinkProps)(MapLayer):

componentDidMount() {
    this.props.onMount()
}

componentWillReceiveProps(nextProps) {
  this.props.onPropsReception(nextProps, this.props)
}

render() {
// ...
}

我不喜欢的是，我以这种方式丢失了上下文，我必须将this.props作为第二个参数传递给onPropsReception方法：

this.props.onPropsReception(nextProps, this.props)

有没有办法从容器组件描述表示组件的生命周期方法，但保留表示组件的上下文？或者更好的是，在表示组件内没有任何调用的情况下覆盖生命周期方法？

Answer 1

抱歉，我还无法添加评论，

为什么不对您的演示组件进行必要的检查＆amp;以后用正确的参数拨打电话？

前：

componentWillReceiveProps(nextProps) {
  if (this.props.floor != nextProps.floor) {
    this.props.loadRooms(nextProps.floor);
  }
}

ContainerComponent：

const mapDispatchToLinkProps = (dispatch, ownProps) => {
  return {
    onMount: () => {
      dispatch(loadRooms(ownProps.floor))
    },
    loadRooms: (floor) => {
        dispatch(loadRooms(floor));
    }
  }
}

你提出的问题对于某些黑客来说是可行的，但它违背了反应和反应。 redux哲学。

终极版。从容器组件描述表示组件的生命周期方法

1 个答案: