Question

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

然后，需要将这些道具从父组件传递到子组件。到目前为止，一切都很好。.

但是，当我扩展Props接口时，即来自react-router Typescript的RouteComponentProps也要求我传递“历史，位置，匹配”，我认为我不应该手动传递...

我不认为它与RouteComponentProps特别相关，因为在某些情况下，我会在MapDispatchToProps和PropsFromDispatch接口中遇到相同的错误-对这种情况的更详尽的解释here

这是我的代码：

/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”，“ @ types / react”：“ ^ 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>
        )
    }
}

不需要道具通过。

Answer 2

我遇到了同样的问题，@ goediaz的想法对我来说很好，唯一的区别是我正在使用功能组件。

const MyFunciont: React.FC<IGlobalState> = (_RouteComponentProps, props) = {
//here your code

return (
    //html code
    )
}

类型中缺少的属性，不必手动将其传递给子组件

2 个答案: