我有一个HOC,我正在连接到Redux。我从Flow得到一个错误:
Error:(23, 62) Cannot call NavigateClickWrapper with
PrimaryActionButton bound to ComposedComponent because property
navParams is missing in
Props [1] but exists in ComposedProps [2] in type argument Props [3].
我的HOC:
type ComposedProps = {
navigationRouteName: navigationRouteName,
navParams: navParams,
preNavigation: () => any,
postNavigation: () => any
}
type ConnectedProps = ComposedProps & {
navigate: (navigationRouteName, navParams, simpleStackNavigation) => Promise<any>,
showSideBar: () => Promise<any>,
}
export const NavigateClickWrapper = (ComposedComponent: React.ComponentType<ComposedProps>) => connect(null, mapDispatchToProps)(
class extends React.Component<ConnectedProps> {
static defaultProps = {
preNavigation: () => {},
postNavigation: () => {},
}
render() {
return (
<ComposedComponent {...this.props} onClick={this.onClick}/>
)
}
onClick = () => {
this.props.preNavigation()
this.props.showSideBar()
this.props.navigate(this.props.navigationRouteName, this.props.navParams, this.props.hasOwnProperty('simpleStackNavigation'))
this.props.postNavigation()
}
}
)
const mapDispatchToProps = (dispatch, props) => {
return {
showSideBar: () => dispatch(showSideBar()),
navigate: (routeName, navParams = {}, inStackNavigator = false) => {
dispatch(SimpleStackNavigatorActions.navigate(routeName, navParams, inStackNavigator))
}
}
}
export default NavigateClickWrapper
实施:
const mapStateToProps = (state, props: Props) => {
return {
label: 'Move to Processing',
icon: <i className={'fa fa-long-arrow-right'} />,
onClick: props.onClick,
navigationRouteName: 'MoveToProcessing',
navParams: {id: props.id}
}
}
export default connect(mapStateToProps)(NavigateClickWrapper(PrimaryActionButton))
该组件呈现良好。我不太确定我还需要做些什么来通知Flow它正在接收的道具。它与double connect语句有关吗?