Отсутствуют свойства типа, которые не должны передаваться вручную дочернему компоненту

Question

В моем дочернем компоненте я определяю интерфейс Props и включаю его в React.Component.

Затем эти реквизиты необходимо передать дочернему компоненту из родительского компонента. Пока все хорошо, все это имеет смысл ..

Однако, когда я расширяю интерфейс Props с помощью RouteComponentProps от реактивного маршрутизатора, Typescript также требует, чтобы я передавал «историю, местоположение, совпадение», что я не думаю, что должен передавать вручную…

Я не думаю, что это связано конкретно с RouteComponentProps, поскольку в некоторых случаях я сталкиваюсь с той же ошибкой с MapDispatchToProps и интерфейсом PropsFromDispatch - более подробное объяснение этого случая здесь

Вот мой код:

/ Child.tsx

import * as React from 'react'
import { RouteComponentProps } from 'react-router';

interface Props extends RouteComponentProps { }

class Child extends React.Component<Props> {
    render() {
        return (
            <div>

            </div>
        )
    }
 }

export default Child;

/ Parent.tsx

import * as React from 'react'
import Child from './Child';

export default class Parent extends React.Component {
    render() {
        return (
            <div>
                <Child />
             </div>
        )
    }
}

Ошибка в /Parent.tsx:

<Child/>

Type '{}' is missing the following properties from type 
'Readonly<Props>': history, location, match - ts(2739)

Версии машинописного текста и React:

"машинопись": "^ 3.2.1", "реагировать": "^ 16.6.3", "@ типы / реагировать": "^ 16.7.13"

Спасибо за любой совет!

Answer 1

Таким образом, проблема вызвана Props, которые помечены как обязательные для класса RouteComponentProps.

При обходе проблемы вам необходимо экспортировать ваш класс as any, он будет экспортировать ваш классбез какого-либо типа.

import * as React from 'react'
import { RouteComponentProps, withRouter } from 'react-router';

interface Props extends RouteComponentProps { }

class ChildImpl extends React.Component<Props> {
    render() {
        return (
            <div>

            </div>
        )
    }
 }
const Child = withRouter(ChildImpl as any);//Note: It is a workaround not an actual solution
export default Child;

А затем в вашем родителе:

import * as React from 'react'
import Child from './Child';
export default class Parent extends React.Component {
    render() {
        return (
            <div>
                <Child />
             </div>
        )
    }
}

Никаких реквизитов не потребуется для прохождения.