React/TypeScript : Make a component interface with certain props, so that its parent can supply such-CodePudding

I want to make a MenuButton interface or type which is supposed to have a "isMenuOpen" prop, that its parent can supply.

function Menu({ SomeButton }: { SomeButton: MenuButton }) {
  const [isOpen, setIsOpen] = useState(false)

  return <div><SomeButton isMenuOpen={isOpen} />{ isMenuOpen ? menu stuff : null }</div>
}

CodePudding user response：

Use the type React.ComponentType:

type MenuProps = { SomeButton: React.ComponentType<{ isOpen: boolean }> }

function Menu(props: MenuProps) {
    return <SomeButton isOpen={true} />
}