为什么在 mapToDispatch ownProps 中没有正确填充连接的道具？

Question

我真的无法理解 mapDispatchToProps 中 mapStateToProps 和 ownProps 的范围

const MyComponent = (props) => (
    <button onClick={props.onClick}>{props.myProp} / {props.otherProp}</button>
)

const ConnctedMyComponent = connect(
    (state) => ({
        myProp: 'mapped',
        otherProp: 'other'

    }),
    (dispatch, ownProps) => ({
        onClick: () => {
            console.log(ownProps);
        }
    })
)(MyComponent)

日志显示

{ myProp: 'original' }

1. 为什么myProp 没有设置为mapped？
2. 为什么otherProp 不可用？
3. 按钮内容正确设置为mapped / other
4. 这是我应该将映射道具传递给映射调度道具的方式吗？

const MyComponent = (props) => (
    <button onClick={() => props.onClick(props.myProp)}>{props.myProp} / {props.otherProp}</button>
)

5. 有没有办法将映射调度回调绑定到连接的组件（如访问映射存储属性）？

谢谢

Answer 1

ownProps 只是传递给 connect 生成的外包装组件的 props。

我想你已经创建了这样的组件：

<ConnctedMyComponent myProp="original" />

在这种情况下，ownProps 将始终为{myProp: "original"}，因为它反映了给予外包装的道具。

正如您所建议的，如果您想访问已连接的道具，您必须将它们作为参数传递：

const MyComponent = (props) => (
  <button onClick={() => props.onClick(props.myProp)}>{props.myProp} / {props.otherProp}</button>
);

并在 onClick 调度方法中检索它们：

onClick: (props) => {
  console.log(props);
}

Answer 2

ownProps 是传递给 wrapper 组件的道具，在您的示例中为ConnctedMyComponent，当您渲染它时（例如<ConnctedMyComponent myProp='mapped'/>）

1) 为什么 myProp 没有设置为映射？

因为您没有将它作为道具传递给ConnctedMyComponent，所以它不存在于ownProps中

2) 为什么 otherProp 不可用？

与 1 相同，您没有将它作为道具传递给 ConnctedMyComponent，因此它在 ownProps 中不存在

3) 按钮内容正确设置为映射/其他

您在mapStateToProps 中设置的任何内容都将传递给wrapped 组件MyComponent

4) 这是我应该将映射道具传递给映射调度道具的方式吗？

是的