Typescript + React + Redux +actrouter: «свойство не существует для типа IntrinsicAttributes & IntrinsicClassAttributes», передавая реквизиты от родителя к потомку

Question

Я работаю над проектом, в котором участвуют Typescript, React, Redux и реакции-маршрутизатор.Когда я пытаюсь передать реквизиты от ParentComponent к Childcomponent, который подключен к Redux, машинописный текст выдает мне следующую ошибку:

Ошибка: (20, 17) TS2339: Свойство 'exampleProp' несуществует для типа 'IntrinsicAttributes & IntrinsicClassAttributes, never>, any, any >> & Readonly <{children ?: ReactNode;}> & Readonly <...> '.

Дочерний компонент выглядит следующим образом:

interface ChildComponentProps {
    user: UserData;
}

interface PropsToPass {
    exampleProp: string;
}

class ChildComponent extends React.Component<ChildComponentProps & PropsToPass, any> {
    constructor(props: ChildComponentProps & PropsToPass) {
        super(props);
    }

    render() {
        return (
            <div>
                Content
            </div>
        );
    }
}

const mapStateToProps = (state: ApplicationState) => ({
    user: state.authentication.user
});

const mapDispatchToProps = (dispatch: Function) => ({
});

export default withRouter(connect<{}, {}, PropsToPass>(mapStateToProps, mapDispatchToProps)(ChildComponent) as any);

Родительский компонент выглядит следующим образом:

interface ParentComponentProps  {

}

class ParentComponent extends React.Component<ParentComponentProps, any> {
    constructor(props: ParentComponentProps) {
        super(props);
    }

    render() {
        return (
            <ChildComponent
                exampleProp="Test" // This line is highlighted as being problematic
            />
        );
    }
}

const mapStateToProps = (state: ApplicationState) => ({
});

const mapDispatchToProps = (dispatch: Function) => ({
});

export default connect(mapStateToProps, mapDispatchToProps)(ParentComponent);

Мой редактор выделяет строку, которая передает «test» как значение exaampleProp дочернему компоненту.Я посмотрел этот пост , чтобы решить мою проблему, но, к сожалению, предлагаемое решение не работает для меня.Я думаю, что это как-то связано с тем, что я экспортирую свой дочерний компонент с помощью функции withRouter.Я не уверен, что я делаю не так здесь.

Любая помощь будет принята с благодарностью.

Answer 1

Мне удалось решить проблему, хотя я пока не совсем понимаю, почему именно проблема была решена, поэтому, если кто-то понимает, не стесняйтесь предоставить дополнительную информацию о том, почему это работает.

Все, что я сделал, это изменил последнюю строку с дочернего компонента с:

export default withRouter(connect<{}, {}, PropsToPass>(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent) as any);

на

export default withRouter<PropsToPass & RouteComponentProps>(connect<{}, {}, PropsToPass>(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent) as any);