TypeScript：在 React 中的 props 中传递组件时如何定义类型？

Question

这是代码示例，JS 版本工作正常。

我在 TS 中遇到的问题：

import React from 'react'

class Parent extends React.Component {
    render() {
      return (
        <Child Cpnt={<Header title='Header' />} />
        /* TS error on Cpnt */
      )
    }
  }

interface ChildProps {
    Cpnt: React.ComponentClass
}

class Child extends React.Component <ChildProps> {
    render () {
        const { Cpnt } = this.props
        return (
            <div>
                {{Cpnt}}
            </div>
        )
    }
}

interface HeaderProps {
    title: string
}

class Header extends React.Component <HeaderProps> {
    render () {
        const { title } = this.props
        return (
            <p>{title}</p>
        )
    }
}

我在<Child Cpnt上遇到错误

[ts]
Type 'Element' is not assignable to type 'ComponentClass<{}, any>'.
  Type 'Element' provides no match for the signature 'new (props: {}, context?: any): Component<{}, any, any>'. [2322]

我应该在这里定义什么类型？

Answer 1

React“可渲染”不是React.ComponentClass而是React.ReactNode 。

问React.ReactNode在Cpnt道具。

Answer 2

您正在传递<Header title='header' />这是一个 React 元素，而不是Header ，它是一个组件类。