小编Leo*_*vdb的帖子

在我的子组件中，我定义了 Props 接口并将其包含在 React.Component 中。

然后需要将这些 Props 从父组件传递给子组件。到目前为止一切顺利，这一切都说得通..

但是，当我使用来自 react-router Typescript 的 RouteComponentProps 扩展 Props 接口时，还需要我传递“历史、位置、匹配”，我认为我不应该手动传递这些信息......

我认为它与 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 { …

在我的子组件中，我正在定义MapDispatchToProps，将它们传递到connect中，并相应地定义一个接口PropsFromDispatch，该接口在React.Component Props接口中进行了扩展。现在，在我的父组件中，Typescript告诉我它缺少我在PropsFromDispatch中定义的属性。

这似乎并不完全荒谬，因为我将它们定义为React.Component Props接口的一部分，但是我希望'connect'能够像处理PropsFromState一样来处理它。不必从父组件传递到子组件，而是从州映射到道具。

/JokeModal.tsx

...

interface Props extends PropsFromState, PropsFromDispatch {
    isOpen: boolean
    renderButton: boolean
}

...

const mapDispatchToProps = (dispatch: Dispatch<any>): 
PropsFromDispatch => {
    return {
        tellJoke: (newJoke: INewJoke) => dispatch(tellJoke(newJoke)),
        clearErrors: () => dispatch(clearErrors())
    }
}

interface PropsFromDispatch {
    tellJoke: (newJoke: INewJoke) => void
    clearErrors: () => void
}

...

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

/Parent.tsx

...

button = <JokeModal isOpen={false} renderButton={true} /> 
...

在/Parent.tsx的这一行中，Typescript现在告诉我：

Type '{ isOpen: false; renderButton: true; }' is missing the 
following properties from …