javascript - 如何使用 ref 转发键入复合组件

Question

我正在尝试自定义 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

Answer 1

我结束了，像这样输入我的组件：

const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps> & {Header?: React.FC }

BottomSheet.Header = ({ children }) => { return <h1>Header</h1> }

这仍然有使 Header 属性可选的缺点