3

Есть желание сделать вложенные компоненты используя стек 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>
);

2 ответа 2

2
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>
);
4
  • О, круто! Я почему-то считал, что нельзя функциям просто так свойства докидывать. Но скопировал это в ts и в принципе работает, только надо тип параметров указать PropsWithChildren<{}>.
    – Qwertiy
    21 мар 2022 в 10:18
  • Спасибо, ваш вариант подошел. но пришлось его заточить под ts, в своем вопросе выложу код
    – user447630
    21 мар 2022 в 11:00
  • @user447630, во-первых, ответы надо писать в ответах, а не в вопросе, во-вторых, ты что-то перемудрил.
    – Qwertiy
    21 мар 2022 в 11:29
  • 1
    @ТрипольскийПётр, я добавил ts-версию в твой ответ - не против?
    – Qwertiy
    21 мар 2022 в 11:29
1
function Outer({ children }: PropsWithChildren<{}>) {
  return <div>{children}</div>
}

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

function Smth() {
  return (
    <Outer>
      <Outer.Inner />
    </Outer>
  )
}
2
  • Спасибо, ваш вариант хороший, но у нас в проекте в правилах запрещено использовать namespace
    – user447630
    21 мар 2022 в 11:16
  • 1
    @user447630, соседний вариант действительно лучше. Я думал, что ts не позволит просто так присваивать левые свойства функциям, поэтому нахимичил модуль. А раз он позволяет, то надо просто там типы дописать и всё.
    – Qwertiy
    21 мар 2022 в 11:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.