我正在尝试使用typescript实现下面的tabsample作为react组件;
https://www.w3schools.com/howto/howto_js_tabs.asp
我现在正在开发过程中,一切都很顺利,但我只是有一个关于儿童 prop 类型的问题。
我有一个模板来创建一个选项卡菜单一样;
<Tabs>
<Tab tabId="home" title="Home">
<h6>Home page content</h6>
</Tab>
<Tab tabId="settings" title="Settings">
<h6>Settings page content</h6>
</Tab>
<Tab tabId="profile" title="Profile">
<h1>Profile page content</h1>
</Tab>
</Tabs>
Tabs组件应该获得一个或多个Tab组件,我已经在TabsProps中声明了这一点。在当前状态下,我将子元素定义为JSX.Element,并按如下方式解析这些元素;
标签 prop ;
export interface TabsProps {
/**
* Tab contents
*/
children?: JSX.Element[]
}
选项卡组件呈现;
return (
<div>
<div className="tab">
{
children?.map((tab: JSX.Element) => {
let title = tab.props.title
let tabId = tab.props.tabId
return <button key={tabId} className="tablinks" onClick={(event) => onButtonClicked(tabId, event.target)}>{title}</button>
})
}
</div>
{
children?.map((tab: JSX.Element) => {
let tabId = tab.props.tabId
return (
<div key={tabId} id={tabId} className="tabcontent">
{tab.props.children}
</div>)
})
}
</div>
);
还有我的tab.js文件;
export interface TabProps {
/**
* Unique tab id
*/
tabId: String;
/**
* Tab title
*/
title: String;
/**
* Tab contents
*/
children: JSX.Element
}
/**
* Primary tab element to wrap tab contents
*/
const Tab: React.FC<TabProps> = (props) => {
return <h1>test</h1>
};
export default Tab;
现在我问的是主要问题,子对象类型是JSX.Element数组类型,但我认为应该是props中包含title和tabId元素的类型,在当前状态下,我可以输入let title = tab.props.abc
代替let title = tab.props.title
,直到运行时都不会有问题,我该如何处理?
1条答案
按热度按时间wqnecbli1#
我可以通过使用
React.ReactElement<TabProps>
而不是JSX.Element[]
来处理这个问题。