What is the correct way to set an element type passed as a parameter-CodePudding

I'm trying to set a type to element passed as a parameter using React.ComponentType.

import * as React from "react"

type BaseType = {
  element: React.ComponentType
}

const Base = ({element: Element}: BaseType) => (
  <Element />
)

const renderBase = (
  Component: React.ComponentType
) => <Base element={Component} />

const Hello = () => renderBase(<h1>Hello</h1>)

The error is: Argument of type 'Element' is not assignable to parameter of type 'ComponentType<{}>'.

Playground example

CodePudding user response：

If you wish to pass a JSX element as a prop, you can use the type JSX.Element, but you will also have to change Base, since <Element/> assumes Element is a component, not an element. It works if you just return the element itself:

type BaseType = {
  element: JSX.Element
}

const Base = ({ element }: BaseType ) => element

const renderBase = (element: JSX.Element) =>
  <Base element={element} />

const Hello = () =>
  renderBase(<h1>Hello</h1>)

(I've also renamed Element to element, to emphasize it's not a component.)

TypeScript playground