是否可以通过参数传递/连接方法到包装器组件?让我解释一下......
在redux app中,我有两个组件WrapperComponent和ComposedComponents(例如ComposedComponent1,ComposedComponent2),它们应该由包装器组件包装。以前我有一些方法/操作连接到ComposedComponents(一些方法连接到ComposedComponent1,不同于ComposedComponent2)。这些方法需要参数(例如this.props.user,this.props.params.itemId等 - 取决于方法)。 现在我想将每个ComposedComponent传递给WrapperComponent中的WrapperComponent(使用正确的param /参数)传递方法,执行stg else并渲染ComposedComponent。我真的不知道是否可以将带有适当参数的方法传递给WrapperComponent。
现在在ComposedComponent中我有类似的东西:
import WrapperComponent from './Wrapperomponent'
import { connect } from 'react-redux'
import { getUser, getItem } from '../actions/exampleActions'
class ComposedComponent extends React.Component {
componentDidMount(){
this.props.getUser(this.props.params.userId)
this.props.getItem(this.props.item)
}
render(){
return (something)
}
}
我修改它以使用WrapperComponent(但不传递参数):
class ComposedComponent extends React.Component {
render(){
return (something)
}
}
export default connect(null,{ getUser, getItem })(WrapperComponent(connect(mapStateToProps)(ComposedComponent)))
但总的来说,我正在努力实现以下目标:
export default connect(null,{
getUser(this.props.params.userId),
getItem(this.props.item)
})(WrapperComponent(connect(mapStateToProps)(ComposedComponent)))
可以实现吗?
答案 0 :(得分:1)
据我了解,您正在尝试将已绑定ID的方法传递给组件。这可以这样实现:
首先,组件看起来像这样。它可以使用方法getTheUser()和getTheItem()而不提供ID。
a
包装器/容器可以预先绑定ID,如下所示:
/* ComposedComponent.js(x) */
class ComposedComponent extends React.Component {
componentDidMount(){
this.props.getTheUser();
this.props.getTheItem();
}
render(){
return (something)
}
}
第二个选项不是绑定id。它也是reccomended solution by gaearon:“这不是那么优雅,但它比复杂的connect()声明更高效,也更容易理解。”
因此组件接收方法和id作为prop:
// WrapperComponent.js(x)
import ComposedComponent from './ComposedComponent'
import { connect } from 'react-redux'
import { getUser, getItem } from '../actions/exampleActions'
//First, extract the user id from state
function mapStateToProps(state) {
return {
userId: state.where.you.get.user.id
};
}
// Then get your action and bind the dispatch to it
function mapDispatchToProps(dispatch) {
return {
getUser: (userId) => dispatch(getUser(userId));
}
}
//Now take the user id and bind it also to the action
function mergeProps(stateProps, dispatchProps) {
const {userId} = stateProps;
const {getUser} = dispatchProps;
return {
getThisUser: () => getUser(userId)
}
}
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(ComposedComponent);
容器只是为容器提供了它可能需要的所有方法和ID:
/* ComposedComponent.js(x) */
class ComposedComponent extends React.Component {
componentDidMount(){
this.props.getUser(this.props.userId);
this.props.getItem(this.props.userId);
}
render(){
return (something)
}
}