使用包装器组件的参数传递方法

时间:2016-12-07 09:01:18

标签: javascript reactjs react-redux

是否可以通过参数传递/连接方法到包装器组件?让我解释一下......

在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)))

可以实现吗?

1 个答案:

答案 0 :(得分:1)

选项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)
    }
}

(更好)选项2:

第二个选项不是绑定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)
    }
}