reactjs 在react-aria中找不到useTabListState的类型

hrysbysz  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(126)

我正在测试react-aria选项卡,并尝试在它们的示例中添加类型。
问题是,我不确定选项卡组件中使用的props应该使用哪种类型。useTabListState使用TabListStateOptions,但我在包中找不到它们。我检查了仓库,但似乎没有在库中导出。
我应该使用node_modules中的类型吗?我是否错过了一些寻找类型的策略?
这是页面上的当前代码(不包括css和用法):

import {useTab, useTabList, useTabPanel} from 'react-aria';
import {Item, useTabListState} from 'react-stately';

function Tabs(props) {
  let state = useTabListState(props);
  let ref = React.useRef(null);
  let { tabListProps } = useTabList(props, state, ref);
  return (
    <div className={`tabs ${props.orientation || ''}`}>
      <div {...tabListProps} ref={ref}>
        {[...state.collection].map((item) => (
          <Tab
            key={item.key}
            item={item}
            state={state}
            orientation={props.orientation}
          />
        ))}
      </div>
      <TabPanel key={state.selectedItem?.key} state={state} />
    </div>
  );
}

function Tab({ item, state, orientation }) {
  let { key, rendered } = item;
  let ref = React.useRef(null);
  let { tabProps } = useTab({ key }, state, ref);
  return (
    <div {...tabProps} ref={ref}>
      {rendered}
    </div>
  );
}

function TabPanel({ state, ...props }) {
  let ref = React.useRef(null);
  let { tabPanelProps } = useTabPanel(props, state, ref);
  return (
    <div {...tabPanelProps} ref={ref}>
      {state.selectedItem?.props.children}
    </div>
  );
}
k5ifujac

k5ifujac1#

useTabsListState代码可以找到here。它需要一个TabListStateOptions<T>,它只是TabListProps<T>没有孩子。TabListProps<T>源代码可以在here中找到.但是,Tabs组件采用AriaTabListProps<T>,它扩展了TabListProps<T><T>只是每个选项卡的任何附加 prop 。所以我认为你正在寻找这样的东西:

import { 
  useTab, 
  useTabList, 
  useTabPanel, 
  AriaTabListProps, 
  AriaTabProps 
} from "react-aria";
import { Item, useTabListState } from "react-stately";

function Tabs(props: AriaTabListProps<AriaTabProps>) {
  let state = useTabListState(props);
  let ref = useRef(null);
  let { tabListProps } = useTabList(props, state, ref);
  return (
    <div className={`tabs ${props.orientation || ''}`}>
      <div {...tabListProps} ref={ref}>
        {[...state.collection].map((item) => (
          <Tab
            key={item.key}
            item={item}
            state={state}
            orientation={props.orientation}
          />
        ))}
      </div>
      <TabPanel key={state.selectedItem?.key} state={state} />
    </div>
  );
}

我已经创建了一个sandbox,尽可能多的输入。我不确定所有这些都有正确的类型,但希望这是有用的。

相关问题