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

Question

是否可以 pass/connect 方法来包装带有参数的组件？让我解释一下...

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

据我了解，您正试图将一个已绑定 ID 的方法传递给组件。这可以这样实现：

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

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

wrapper/container可以这样预先绑定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：

第二个选项是不绑定id。也是reccomended solution by gaearon:"This is not as elegant but it's much more performant and also easier to understand than a complex connect() declaration."

所以组件接收方法和 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);

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

Pass methods with arguments to wrapper component

javascript

reactjs

react-redux

选项 1：

（更好）选项 2：