我正在为我当前的Typescript React项目使用Redux,但很难进入其中。不过,到目前为止,连接组件对我来说还不错。
interface OwnProps {
ownProp?: boolean;
}
interface PropsFromState {
stateProp: any;
}
interface PropsFromDispatch {
dispatchProp: (...) => void;
}
type MyComponentProps = OwnProps & PropsFromState & PropsFromDispatch;
class MyComponent extends React.Component<MyComponentProps> {...}
const mapStateToProps = ({ componentState }: IAppState, ownProps: OwnProps): PropsFromState => {
return {
stateProp: componentState.stateProp,
ownProp: ownProps.ownProp,
};
};
const mapDispatchToProps = (dispatch: any): PropsFromDispatch => {
return {
dispatchProp: (...) => dispatch(dispatchProp(...))
};
};
export default connect<PropsFromState, PropsFromDispatch, OwnProps>(
mapStateToProps,
mapDispatchToProps
)(MyComponent);
就在最近,虽然我试图在一个连接的组件上放置一个ref,但我发现我必须启用
forwardRef
选项所以我更新了连接电话
export default connect<PropsFromState, PropsFromDispatch, OwnProps>(
mapStateToProps,
mapDispatchToProps,
null,
{ forwardRef : true }
)(MyComponent);
但因为我必须把第三个参数
mergedProps
介于两者之间(我认为这可能是默认的)
null
没有任何问题),
tslint
现在,当我尝试渲染组件时,抛出一个错误,比如
<MyComponent ownProp ref={ref => this.comp = ref}/>
Type '{ ownProp: true; ref: (ref: Component<Pick<MyComponent, "ownProp" | "stateProp" | "dispatchProp"> & OwnProps, any, any>) => Component<...>; }' is missing the following properties from type 'Readonly<Pick<MyComponentProps, "ownProp" | "stateProp" | "dispatchProp"> & OwnProps>': stateProp, dispatchProp - ts(2739)
似乎组件现在需要其他不需要的道具。知道怎么处理吗?