在我的子组件中,我定义了 MapDispatchToProps,将它们传递给 connect 并相应地定义了一个在 React.Component Props Interface 中扩展的接口 PropsFromDispatch。现在在我的父组件中,Typescript 告诉我它缺少我在 PropsFromDispatch 中定义的属性。
这似乎并不完全荒谬,因为我将它们定义为 React.Component Props 接口的一部分,但是我希望“connect”能够像处理我的 PropsFromState 一样处理这个问题,我也这样做不必从父组件传递到子组件,而是从状态映射到props。
/JokeModal.tsx
...
interface Props extends PropsFromState, PropsFromDispatch {
isOpen: boolean
renderButton: boolean
}
...
const mapDispatchToProps = (dispatch: Dispatch<any>):
PropsFromDispatch => {
return {
tellJoke: (newJoke: INewJoke) => dispatch(tellJoke(newJoke)),
clearErrors: () => dispatch(clearErrors())
}
}
interface PropsFromDispatch {
tellJoke: (newJoke: INewJoke) => void
clearErrors: () => void
}
...
export default connect(mapStateToProps, mapDispatchToProps)(JokeModal);
/Parent.tsx
...
button = <JokeModal isOpen={false} renderButton={true} />
...
在这一行 /Parent.tsx Typescript 现在告诉我:
Type '{ isOpen: false; renderButton: true; }' is missing the
following properties from type 'Readonly<Pick<Props, "isOpen" |
"renderButton" | "tellJoke" | "clearErrors">>': tellJoke, clearErrors
ts(2739)
有趣的是,我可以通过删除 MapDispatchToProps 来完全避免错误,而是将动作直接传递到连接中(包括动作创建者中已经存在的调度):
export default connect(mapStateToProps, { tellJoke, clearErrors })(JokeModal);
不过我想知道如何在这里使用 MapDispatchToProps 以及为什么 Typescript 期望我将这些操作传递给子组件?
很高兴听到您的建议!