withRouter 与 react-redux 连接导致打字稿出错

Posted 2023-02-22

【中文标题】withRouter 与 react-redux 连接导致打字稿出错

【英文标题】：withRouter with react-redux connect causing error with typescript

【发布时间】：2020-06-30 00:29:09

【问题描述】：

我正在修复 react-router-dom 中的一个错误，我需要用 withRouter 包装连接，我解决了这个解决方案的问题，但现在我遇到了打字稿问题，我'我收到此错误。

这是发生问题的代码部分

这里是我的整个组件文件

import * as React from 'react'
    import  connect  from 'react-redux'
    import  bindActionCreators  from 'redux'
    import  pageHeaderHeight  from '../../utils/theme'
    import  closeDrawerMenu, openDrawerMenu  from '../../redux/ActionCreators/DialogActions'
    import PageHeaderLogo from './PageHeaderLogo/pageHeaderLogo'
    import SearchInput from './SearchInput'
    import DrawerMenuItem from '../DrawerMenu/DrawerMenuItem'
    import  AppBar, Toolbar, Typography  from '@material-ui/core'
    import  withRouter  from 'react-router-dom'
    import 
        RootReducerInterface,
        OpenDrawerInterface,
        CloseDrawerInterface,
     from '../../utils/interfaces'
    
    const PageHeader: React.FC<Props> = (props) => 
    
        return (
            <AppBar position='fixed' style= appBarStyle  elevation=1>
                <Toolbar style= toolbarStyle >
                    <PageHeaderLogo/>
                    <SearchInput/>
                    <div style=menuOptions>
                        <DrawerMenuItem route='/tutorial'/>
                        <DrawerMenuItem route='/partners'/>
                        <DrawerMenuItem route='/register'/>
                        <DrawerMenuItem route='/login'/>
                    </div>
                </Toolbar>
            </AppBar>
        )
    
    
    const mapStateToProps = (state: RootReducerInterface) => (
        drawerIsOpen: state.DialogReducer.drawerIsOpen,
    )
    const mapDispatchToProps = (dispatch: any) => 
        bindActionCreators( openDrawerMenu, closeDrawerMenu , dispatch)
    
    export default withRouter(connect<StateProps, DispatchProps, OwnProps>(
        mapStateToProps,
        mapDispatchToProps
    )(PageHeader))
    
    /////////////////////////////////////////////////////////////////
    ///////////////////////////// STYLES ////////////////////////////
    /////////////////////////////////////////////////////////////////
    const appBarStyle = 
        padding: '0 10px',
        height: pageHeaderHeight,
        background: '#fff'
    
    const toolbarStyle = 
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        height: '100%',
        padding: 0,
    
    const menuOptions = 
        display: 'flex',
        flexDirections: 'row',
        width: '50%',
    
    
    /////////////////////////////////////////////////////////////////
    /////////////////////////// INTERFACES //////////////////////////
    /////////////////////////////////////////////////////////////////
    interface OwnState 
    
    interface OwnProps 
    
    interface StateProps 
        drawerIsOpen: boolean
    
    
    interface DispatchProps 
        openDrawerMenu: OpenDrawerInterface
        closeDrawerMenu: CloseDrawerInterface
    
    
    type Props = StateProps & DispatchProps & OwnProps
    type State = OwnState


 

我刚刚选择了这个项目，我没有使用打字稿的经验，我不知道是什么导致了这个问题

【参考方案1】：

我通过在 (PageHeader) 之后包含任何内容来解决此问题，如果有人可以提供进一步的解释，那就太好了

 export default withRouter(
                connect<StateProps, DispatchProps, OwnProps>(
                mapStateToProps,
                mapDispatchToProps
            )(PageHeader) as any)