Question

我正在修复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

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

Answer 1

如果有人可以提供进一步的解释，那我会通过在（PageHeader）之后加上任何内容来解决此问题

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

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

1 个答案: