Как решить JSX element type 'LayoutMenu.Category' does not have any construct or call signatures?

Question

[sxivanov]

Container:

import LayoutMenu from "../../components/Layout/LayoutMenu";

interface LayoutProps {}

const Layout: React.FC<LayoutProps> = () => {
  return (
    <LayoutMenu>
      <LayoutMenu.Category title={"ggg"} />
    </LayoutMenu>
  );
};

export default Layout;

MainComponent:

import styled from "styled-components";
import LayoutMenuCategory from "./LayoutMenuCategory"
import LayoutMenuItem from "./LayoutMenuItem";


type Extensions = {
  Category?: typeof LayoutMenuCategory;
  Item?: typeof LayoutMenuItem;
};

interface LayoutMenuProps {
  children?: React.ReactNode;
}

const Menu = styled.div`
  background-color: AliceBlue;
  height: 100vh;
  width: 300px;
`;

const LayoutMenu: React.FC<LayoutMenuProps> & Extensions = (props) => {
  const { children } = props;
  return <Menu>{children}</Menu>;
};

LayoutMenu.Category = LayoutMenuCategory;
LayoutMenu.Item = LayoutMenuItem;

export default LayoutMenu;

Subcomponent:

import styled from "styled-components";

export interface LayoutMenuCategoryProps {
  title?: string;
}

const Category = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  height: 40px;
  &:hover {
    background-color: #c5e3fc;
  }
`;

const LayoutMenuCategory: React.FC<LayoutMenuCategoryProps> = (props) => {
  const { title } = props;
  return <Category>{title}</Category>;
};

export default LayoutMenuCategory;

Answer 1

[Aetae]

type Extensions = {
  Category: typeof LayoutMenuCategory;
  Item: typeof LayoutMenuItem;
};

Иначе оно для ts может быть также и undefined, а undefined - то, что написано в ошибке.

Comments

[sxivanov]

Большое спасибо )