Question

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

interface IDemoProps {
  Header: React.Component;
}

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

当我尝试将组件传递给该道具时，就像这样：

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

<DemoApp Header={MyHeader} />

我收到此错误：

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

我也尝试了以下方法：

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

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

具有相同的错误。我该如何解决？

Answer 1

首先，您在声明组件时将props / state接口传递给该组件：

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

第一个是道具，第二个是状态（可以是一个空对象，或者，如果您的TS linter允许，则人们有时会使用any。

第二，对于您的功能性无状态组件，您应该这样输入：

const MyHeader: React.SFC<{MyHeaderProps}> = (props) => {

您还在props界面中传递的位置。您的标头组件当前尚无道具，因此您还不需要MyHeaderProps，但仍应将其声明为React.SFC。

这意味着您必须将IDemoProps界面更改为

Header: React.SFC;

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

1 个答案: