Javascript 雷杜。描述表象成分';从容器组件中删除生命周期方法
目前我有两个组件(一个容器组件和一个演示组件)。我有一些应该在Javascript 雷杜。描述表象成分';从容器组件中删除生命周期方法,javascript,reactjs,redux,Javascript,Reactjs,Redux,目前我有两个组件(一个容器组件和一个演示组件)。我有一些应该在componentDidMount和componentWillReceiveProps生命周期方法中实现的逻辑,特别是我必须在那里分派一些操作 现在,我正在一个mapDispatchToLinkProps函数中映射这些动作创建者,并使用connect函数将它们传递给我的演示组件的props,然后,我在componentDidMount和componentWillReceiveProps方法中调用它们。下面是我如何实现它的: 容器组件:
componentDidMount
和componentWillReceiveProps
生命周期方法中实现的逻辑,特别是我必须在那里分派一些操作
现在,我正在一个mapDispatchToLinkProps
函数中映射这些动作创建者,并使用connect
函数将它们传递给我的演示组件的props
,然后,我在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)
有没有一种方法可以从容器组件描述表示组件的生命周期方法,但要保留表示组件的上下文?或者更好,在presentational组件中没有任何调用就覆盖生命周期方法?很抱歉,我还不能添加注释
为什么不在表示组件中进行必要的检查&只需在之后使用正确的参数进行调用
例:
集装箱组件:
const mapDispatchToLinkProps = (dispatch, ownProps) => {
return {
onMount: () => {
dispatch(loadRooms(ownProps.floor))
},
loadRooms: (floor) => {
dispatch(loadRooms(floor));
}
}
}
您所问的问题在一些黑客中是可行的,但它违背了react&redux的理念。谢谢您的回答,但我不这么认为。进行此验证:如果(this.props.floor!=nextrops.floor)
在presentational组件中,我实现了一种数据行为,但不应该在这里执行。现在我正在查看connect
方法中的mergeProps
参数。丹·阿布拉莫夫在这里很好地解释了如何使用它:不过,谢谢你的回答!你能解决这个问题吗?我也有类似的问题。我正在使用react路由器和redux。我正在捕获url查询参数(/search?q='foo'&page=1)。url参数更改时调用componentWillUpdate生命周期方法。我不知道如何使用connect方法传递生命周期组件。或者如果我想知道如何将mapStateToProp传递给React.createClass组件。很抱歉,没有时间回到这里,问题没有解决。
const mapDispatchToLinkProps = (dispatch, ownProps) => {
return {
onMount: () => {
dispatch(loadRooms(ownProps.floor))
},
loadRooms: (floor) => {
dispatch(loadRooms(floor));
}
}
}