reactjs - Nepoužitý parameter 'mergedProps' v 'connect' spôsobuje pri renderovaní komponentu chybu
Používam Redux pre môj aktuálny projekt v Typescripte s Reactom a mám trochu problém sa do toho dostať. Pripájanie komponentov mi však zatiaľ funguje dobre.
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);
Len nedávno som sa však pokúsil pridať ref na prepojenú komponentu, kde som zistil, že musím povoliť možnosť forwardRef. Tak som aktualizoval volanie pripojenia na
export default connect<PropsFromState, PropsFromDispatch, OwnProps>(
mapStateToProps,
mapDispatchToProps,
null,
{ forwardRef : true }
)(MyComponent);
Ale pretože som musel vložiť tretí parameter pre mergedProps medzi (čo som si myslel, že môže byť predvolene null bez akýchkoľvek problémov), tslint mi teraz hádže chybu, keď sa pokúsim renderovať komponent, hovoriac niečo ako
<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)
Zdá sa, že komponent teraz vyžaduje ostatné vlastnosti tam, kde by ich vyžadovať nemal. Máte nejaký nápad, ako s tým zaobchádzať?