1.tsx代码
import { Component } from "react";
import './Tab.less'
interface Props {
}
interface user {
id: string,
text: string
}
interface content {
id: string,
text: string
}
interface State {
ButtonIndex: number,
ButtonArray: user[],
ContentArray: content[]
}
class Tab extends Component<Props, State>{
constructor(props: Props) {
super(props)
this.state = {
ButtonIndex: 0,
ButtonArray: [
{
id: '01',
text: '按钮一'
},
{
id: '02',
text: '按钮二'
},
{
id: '03',
text: '按钮三'
}
],
ContentArray: [
{
id: 'c1',
text: '内容一'
},
{
id: 'c2',
text: '内容二'
},
{
id: 'c3',
text: '内容三'
}
],
}
}
FnTab(index: number):void {
this.setState({
ButtonIndex: index
})
}
render() {
return (
<div className='tab'>
{
this.state.ButtonArray.map((item, index) => <button key={item.id} onClick={this.FnTab.bind(this, index)} className={this.state.ButtonIndex === index ? 'tab-button ac' : 'tab-button'}>{item.text}</button>)
}
{
this.state.ContentArray.map((item, index) => <div key={item.id} style={{display:this.state.ButtonIndex===index?'block':'none'}} className='tab-content'>{item.text}</div>)
}
</div>
)
}
}
export default Tab
2.css代码
.tab{
.tab-button.ac{
background-color: red;
}
.tab-content{
display: none;
width: 200px;
height: 100px;
border: 1px solid #000;
}
}