Как сделать вложенные компоненты используя связку React и Typescript

Question

Есть желание сделать вложенные компоненты используя стек React и Typescript

Под вложенными компонентами я подразумеваю возможность использования компонента как по основному default пути, так и через точечную нотацию

Например:

<Menu><Menu.Item>первый пункт меню</Menu.Item></Menu>

Если есть возможность, приведите пример реализации подобного компонента

Заранее спасибо за ваши ответы

Ответ:

const Menu: React.FC & {Item: typeof Item} = ({
  children,
}) => (
  <div>
    {children}
  </div>
);

Menu.Item = ({
  children
}) => (
  <span>
    {children}
  </span>
);

const App = () => (
  <Menu>
    <Menu.Item>Item 1</Menu.Item>
    <Menu.Item>Item 2</Menu.Item>
    <Menu.Item>Item 3</Menu.Item>
  </Menu>
);

Answer 1

const Menu = ({
  children,
}) => (
  <div>
    {children}
  </div>
);

Menu.Item = ({
  children
}) => (
  <span>
    {children}
  </span>
);

const App = () => (
  <Menu>
    <Menu.Item>Item 1</Menu.Item>
    <Menu.Item>Item 2</Menu.Item>
    <Menu.Item>Item 3</Menu.Item>
  </Menu>
);

Для тайпскрипта только добавить типы:

const Menu = ({ children }: PropsWithChildren<{}>) => (
  <div>
    {children}
  </div>
);

Menu.Item = ({ children }: PropsWithChildren<{}>) => (
  <span>
    {children}
  </span>
);

const App = () => (
  <Menu>
    <Menu.Item>Item 1</Menu.Item>
    <Menu.Item>Item 2</Menu.Item>
    <Menu.Item>Item 3</Menu.Item>
  </Menu>
);

Answer 2

function Outer({ children }: PropsWithChildren<{}>) {
  return <div>{children}</div>
}

namespace Outer {
  export function Inner() {
    return <span>inner</span>
  }
}

function Smth() {
  return (
    <Outer>
      <Outer.Inner />
    </Outer>
  )
}

БЛОГ НА HUSL

Как сделать вложенные компоненты используя связку React и Typescript

Ответы (2 шт):