reactjs - קיום פרמטר 'mergedProps' שלא נמצא בשימוש ב-'connect' גורם לשגיאה בעת הצגת הקומפוננטה
אני משתמש ב-Redux עבור פרויקט ה-Typescript React הנוכחי שלי וקצת קשה לי להיכנס לזה. חיבור הרכיבים עובד בסדר עד כה מבחינתי.
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);
רק לאחרונה ניסיתי לשים הפנייה על קומפוננט מחובר, שם גיליתי שעלי להפעיל את האופציה 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)
נראה שהרכיב עכשיו דורש את שאר הפרופס במקום שבו הוא לא אמור לדרוש אותם. יש רעיון איך להתמודד עם זה?