reactjs – MapDispatchToProps导致父组件中的Typescript错误,期
在我的子组件中,我定义了MapDispatchToProps,将它们传递给connect,并相应地定义了一个在React.Component Props接口中扩展的接口PropsFromDispatch.现在在我的父组件中,Typescript告诉我它缺少我在PropsFromDispatch中定义的属性.
这似乎并不完全荒谬,因为我将它们定义为React.Component Props接口的一部分,但是我希望’connect’能够像处理我的PropsFromState一样处理它,我也是不必从父组件传递到子组件,而是从状态映射到道具. /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来避免错误,而是直接将操作传递给connect(包括已经在action creator中的dispatch): export default connect(mapStateToProps,{ tellJoke,clearErrors })(JokeModal); 不过我想知道如何在这里使用MapDispatchToProps以及为什么Typescript期望我将这些操作传递给子组件? 很高兴听到您的建议! 解决方法
我能够重现你的问题,问题显然是在
source code中mapDispatchToProps函数的类型签名中,你可以看到它有一个类型参数Action = AnyAction
export interface Dispatch<A extends Action = AnyAction> { <T extends A>(action: T): T } 您的问题的解决方案是更改Dispatch< any>发送< AnyAction>: const mapDispatchToProps = (dispatch: Dispatch<AnyAction>): PropsFromDispatch 请注意,由于您使用的是redux-thunk,因此类型系统可能不允许您在thunk上调用dispatch,因此您可能必须通过调用来欺骗 clearErrors: () => dispatch<any>(clearErrors()); 或使用ThunkDispatch和ThunkAction进行相当冗长的输入.我在这里有一个这样的打字示例:ThunkDispatch和相应的ThunkAction.请注意,我使用的是typesafe-actions. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |