tabs优化id方式

This commit is contained in:
catchonme 2019-06-11 19:35:15 +08:00
parent 5ccd97b9b5
commit 50894a1de0
2 changed files with 13 additions and 11 deletions

View File

@ -27,7 +27,7 @@ exports[`Renderer:tabs 1`] = `
> >
<div <div
class="a-Tabs" class="a-Tabs"
id="1" id="0"
> >
<ul <ul
class="a-Tabs-links nav" class="a-Tabs-links nav"
@ -38,10 +38,10 @@ exports[`Renderer:tabs 1`] = `
role="presentation" role="presentation"
> >
<a <a
aria-controls="1-pane-0" aria-controls="0-pane-0"
aria-selected="true" aria-selected="true"
href="#" href="#"
id="1-tab-0" id="0-tab-0"
role="tab" role="tab"
> >
基本配置 基本配置
@ -52,10 +52,10 @@ exports[`Renderer:tabs 1`] = `
role="presentation" role="presentation"
> >
<a <a
aria-controls="1-pane-1" aria-controls="0-pane-1"
aria-selected="false" aria-selected="false"
href="#" href="#"
id="1-tab-1" id="0-tab-1"
role="tab" role="tab"
tabindex="-1" tabindex="-1"
> >
@ -68,9 +68,9 @@ exports[`Renderer:tabs 1`] = `
> >
<div <div
aria-hidden="false" aria-hidden="false"
aria-labelledby="1-tab-0" aria-labelledby="0-tab-0"
class="fade tab-pane active in" class="fade tab-pane active in"
id="1-pane-0" id="0-pane-0"
role="tabpanel" role="tabpanel"
> >
<span <span
@ -83,9 +83,9 @@ exports[`Renderer:tabs 1`] = `
</div> </div>
<div <div
aria-hidden="true" aria-hidden="true"
aria-labelledby="1-tab-1" aria-labelledby="0-tab-1"
class="fade tab-pane" class="fade tab-pane"
id="1-pane-1" id="0-pane-1"
role="tabpanel" role="tabpanel"
> >
<div <div

View File

@ -30,6 +30,8 @@ export interface TabsState {
prevKey: any; prevKey: any;
} }
let tabCount = 0;
export default class Tabs extends React.Component<TabsProps, TabsState> { export default class Tabs extends React.Component<TabsProps, TabsState> {
static defaultProps: Partial<TabsProps> = { static defaultProps: Partial<TabsProps> = {
className: '', className: '',
@ -38,7 +40,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
unmountOnExit: false, unmountOnExit: false,
}; };
id = 0; id = '' + tabCount++;
constructor(props: TabsProps) { constructor(props: TabsProps) {
super(props); super(props);
@ -206,7 +208,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
return ( return (
<TabContainer <TabContainer
id={'' + this.id++} id={this.id}
className={cx( className={cx(
`Tabs`, `Tabs`,
{ {