2016-03-21 35 views
2

目前我有两个组件(一个容器组件和一个演示文件)。我有一些逻辑应该在componentDidMountcomponentWillReceiveProps生命周期方法中实施,特别是我必须在那里发送一些操作。Redux。从容器组件描述表示组件的生命周期方法

现在,我映射那些行动的创作者在mapDispatchToLinkProps功能,并传递给我的表象组件的propsconnect功能,事后,我给他们打电话componentDidMountcomponentWillReceiveProps方法。这里是如何,我实现它:

容器组件

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) 

有没有一种方法可以从容器组件描述表示组件的生命周期方法,但是保持表示组件的上下文?或者甚至更好,覆盖生命周期方法而无需在表示组件中调用?

+1

你能解决这个问题吗?我有类似的问题。我正在使用react路由器和redux。我正在捕捉url查询参数(/ search?q ='foo'&page = 1)。当url参数更改时,将调用componentWillUpdate生命周期方法。我不知道使用connect方法传递生命周期组件的方式。或者,如果我如何将mapStateToProp传递给React.createClass组件。 –

+0

对不起,没有时间回到这里,没有解决问题。 –

回答

0

对不起,我不能添加评论还,

为什么不这样做你的表象成分&必要的检查只是做一个电话后用正确的PARAMS?

例如:

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)); 
    } 
    } 
} 

什么你问是可行的有一些黑客,但它违背了反应&终极版理念。

+0

谢谢你的回答,但我不这么认为。进行验证:'if(this.props.floor!= nextProps.floor)'在表示组件中我正在实现一种数据行为,但不应该在这里完成。 现在我正在'connect'方法中寻找'mergeProps'参数。 Dan Abramov就如何在这里使用它提供了一个非常好的解释:https://github.com/reactjs/react-redux/issues/237#issuecomment-168816713 不过,谢谢你的回答! –