javascript - 将带有参数的方法传递给包装器组件

Question

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

在 redux 应用程序中，我有两个组件 WrapperComponent 和 ComposedComponents(例如 ComposedComponent1、ComposedComponent2)，它们应该由 wrapper 组件包装。以前我有一些方法/操作连接到 ComposedComponents(一些方法连接到 ComposedComponent1 而不同于 ComposedComponent2)。这些方法需要参数(例如 this.props.user、this.props.params.itemId 等——取决于方法)。现在我想包装每个 ComposedComponent 将适当的方法传递给 WrapperComponent(使用适当的参数/参数)在 WrapperComponent 中触发传递的方法，执行 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)))

是否可以实现？

Answer 1

选项 1:

据我所知，您正试图将一个已绑定(bind) ID 的方法传递给组件。这可以这样实现:

首先，该组件可能如下所示。它可以在不提供 ID 的情况下使用方法 getTheUser() 和 getTheItem()。

/* ComposedComponent.js(x) */
class ComposedComponent extends React.Component {
    componentDidMount(){
        this.props.getTheUser();
        this.props.getTheItem();
    }
    render(){
        return (something)
    }
}

包装器/容器可以像这样预先绑定(bind) ID:

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

(更好)选项 2:

第二个选项是不绑定(bind) id。也是reccomended solution by gaearon :“这不是那么优雅，但它比复杂的 connect() 声明更高效，也更容易理解。”

因此组件将方法和 id 作为 prop 接收:

/* ComposedComponent.js(x) */
class ComposedComponent extends React.Component {
    componentDidMount(){
        this.props.getUser(this.props.userId);
        this.props.getItem(this.props.userId);
    }
    render(){
        return (something)
    }
}

容器只是为容器提供它可能需要的所有方法和 ID:

// WrapperComponent.js(x)

import ComposedComponent from './ComposedComponent'
import { connect } from 'react-redux'
import { getUser, getItem } from '../actions/exampleActions'

function mapStateToProps(state) {
    return {
        userId: state.where.you.get.user.id
    };
}
function mapDispatchToProps(dispatch) {
    return {
        getUser: (userId) => dispatch(getUser(userId));
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(ComposedComponent);