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' }

为什么myProp未设置为mapped？
为什么otherProp不可用？
按钮内容已正确设置为mapped / other
这是我应该将映射的prop传递给映射的调度prop的方式吗？

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

是否有办法将映射的调度回调绑定到连接的组件（如访问映射的存储属性一样）？

谢谢

Answer 1

ownProps只是传递给connect生成的外部包装器组件的道具。

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

<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是在渲染示例时传递给包装器组件ConnctedMyComponent的道具（例如<ConnctedMyComponent myProp='mapped'/>）

1）为什么未将myProp设置为映射？

因为您没有将其作为对ConnctedMyComponent的支持，所以它在ownProps中不存在

2）为什么otherProp不可用？

与1相同，您没有将其作为对ConnctedMyComponent的支持，因此它在ownProps中不存在

3）将按钮内容正确设置为已映射/其他

您在mapStateToProps中设置的所有内容都会传递到包装组件MyComponent

4）这是我应该将映射属性传递给映射调度属性的方式吗？

是

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

2 个答案: