Reactjs TS传入React.Component类型的prop时出错

在下面的组件中，我有一个React.component类型的道具

interface IDemoProps {
  Header: React.Component;
}

export class DemoApp extends React.Component {
    render() {
        return <header>{this.props.Header}</header>
    }
}

接口IDemoProps{
标题：React.Component；
}
导出类DemoApp扩展React.Component{
render（）{
返回{this.props.Header}
}
}

当我尝试将组件传递到此道具时，如下所示：

const MyHeader = () => {
    return <div>
                <h1>My header!!!</h1>
            </div>
}

<DemoApp Header={MyHeader} />

constmyheader=（）=>{
返回
我的头球！！！
}

我得到了这个错误：

[ts] Type 'Element' is not assignable to type 'Component<{}, {}, any>'.
  Property 'setState' is missing in type 'Element'.

[ts]类型“Element”不可分配给类型“Component”。
类型“Element”中缺少属性“setState”。

我还尝试了以下方法：

class MyHeader extends React.Component{
    render() {
        return <h1>Directory Header</h1>
    }
}

<DemoApp Header={<MyHeader />} />

类MyHeader扩展了React.Component{
render（）{
返回目录头
}
}

---

同样的错误。如何解决此问题？

首先，在声明组件时，您必须将道具/状态接口传递给该组件：

export class DemoApp extends React.Component<IDemoProps, {}>

在这里你也可以通过道具界面。您的header组件当前没有道具，因此您还不需要

MyHeaderProps

，但仍应将其声明为

React.SFC

这意味着您必须将

IDemoProps

界面更改为

Header: React.SFC;

Header: React.SFC;