我正在测试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>
);
}
1条答案
按热度按时间k5ifujac1#
useTabsListState
代码可以找到here。它需要一个TabListStateOptions<T>
,它只是TabListProps<T>
没有孩子。TabListProps<T>
源代码可以在here中找到.但是,Tabs组件采用AriaTabListProps<T>
,它扩展了TabListProps<T>
。<T>
只是每个选项卡的任何附加 prop 。所以我认为你正在寻找这样的东西:我已经创建了一个sandbox,尽可能多的输入。我不确定所有这些都有正确的类型,但希望这是有用的。