Question

我是React的新手，只是一个关于在mapDispatchToProp中传递ownProps的问题，下面是我看到的一些代码的一部分：

class EditExpensePage extends React.Component {
...
}
//EditExpensePage is a component

const mapDispatchToProp = (dispatch, props) => {
    return {
        editExpense: (id, expense) => dispatch(editExpense(id, expense)),
        removeExpense: (data) => dispatch(removeExpense(data))
    };
}

connectedComponent = connect(mapStateToProp, mapDispatchToProp(EditExpensePage);
export default connectedComponent ;

我不明白为什么即使没有在mapDispatchToProp函数中使用道具，我们仍然需要传递道具？

已更新：

例如，我发现在mapDispatchToProp中传递道具会覆盖用户提供的道具，

<connectedComponent date={2019} />

因此EditExpensePage组件将没有props.date？我的理解正确吗？

Answer 1

将props传递给mapDispatchToProps的不是您，而是react-redux's connect HOC传递的信息，在某些场合可能有用

在您的情况下，您不在mapDispatchToProps中使用props，可以在定义函数时避免使用

class EditExpensePage extends React.Component {
...
}
//EditExpensePage is a component

const mapDispatchToProp = (dispatch) => {
    return {
        editExpense: (id, expense) => dispatch(editExpense(id, expense)),
        removeExpense: (data) => dispatch(removeExpense(data))
    };
}

export default connect(mapStateToProp, mapDispatchToProp)(EditExpensePage);

编辑：

connectedComponent = connect(mapStateToProp, mapDispatchToProp(EditExpensePage);
export default connectedComponent ;

就以下语法而言，

是不正确的，因为connect是一个HOC，它将组件作为参数，而mapDispatchToProps必须是函数引用。正确的语法是

connectedComponent = connect(mapStateToProp, mapDispatchToProp)(EditExpensePage);
    export default connectedComponent ;

Answer 2

您不必传递ownProps，对于必须在mapDispatchToProps中使用连接的组件（容器）自己的道具的情况，它是可选参数。通常，您只是从此map函数（这些prop是函数）中获得道具，并且不会传递给

。

顺便说一下，整个mapDispatchToProps是一个可选参数。如果您不将其传递给connect函数，则可以像这样直接从道具到达调度程序：

class EditExpensePage extends React.Component {
  handleEditExpense = (id, expense) => {
    const { dispatch } = this.props;
    dispatch({ type: EXPENSE_EDIT, payload: { id, expense } });
  }
  ...
}

connect(mapStateToProps)(EditExpensePage)

在mapDispatchToProp中使用ownProps

2 个答案: