Как вводить составные компоненты с переадресацией ссылок - PullRequest
Новая
       22

Как вводить составные компоненты с переадресацией ссылок

0 голосов
/ 09 июля 2020

Я пытаюсь настроить компоненты вкладки Chakra-ui. Согласно их документам, он должен быть заключен в React.forwardRef, поскольку они используют cloneElement для внутренней передачи состояния. Но затем TS жалуется: 

[tsserver 2559] [E] Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes & { isSelected?: boolean | undefined; } & RefAttributes<HTMLElement>'.

Можно ли добавить типы к CoolTab компоненту, чтобы он по-прежнему работал с их api? 

const CoolTab = React.forwardRef<HTMLElement, { isSelected?: boolean }>((props, ref) => {
  return (
    <Tab ref={ref} isSelected={props.isSelected} {...props}>
      {props.isSelected ? '?' : '?'}
      {props.children}
    </Tab>
  )
})

CoolTab.displayName = 'CoolTab'

const Module = () => {
  return (
    <CenterLayout>
      <Card>
        <Tabs>
          <TabList>
            <CoolTab>General</CoolTab>
            <Tab>Notifications</Tab>
          </TabList>

          <TabPanels>
            <TabPanel>
              <p>one!</p>
            </TabPanel>
            <TabPanel>
              <p>two!</p>
            </TabPanel>
          </TabPanels>
        </Tabs>
      </Card>
    </CenterLayout>
  )
}

https://chakra-ui.com/tabs#creating -custom-tab-components

...