HTML部分:
render() {
return (
<div className="tab">
<div className="buttonbox">
{this.state.Button && this.state.Button.map((item, index) =>
<div className={this.state.ButtonIndex === index ? "button ac" : 'button'} key={index} onClick={this.FnTab.bind(this, index)}>{item.txt}</div>
)}
</div>
{
this.state.Content.map((item, index) => <div key={item.id} style={{ display: this.state.ButtonIndex === index ? 'block' : 'none' }} className='content'>{item.txt}</div>)
}
</div>
)
}
css部分(配置的是Less)
.tab {
width: 400px;
margin: 50px auto;
.buttonbox {
display: flex;
.button {
width: 100px;
height: 40px;
line-height: 40px;
border: 1px solid rgb(40, 231, 168);
outline: none;
text-align: center;
box-sizing: border-box;
}
.button.ac {
color:red;
background-color: rgb(187, 255, 0);
}
}
.content {
display: none;
width: 400px;
height: 100px;
border: 1px solid #000;
border-top: none;
font-size: 24px;
text-align: center;
line-height: 100px;
}
js部分
import { Component } from 'react'
import { connect } from 'react-redux'
import './index.less'
interface Props { }
interface Data {
id: string
txt: string
}
interface State {
ButtonIndex: number
Button: Data[]
Content: Data[]
}
class Tab extends Component<Props, State>{
// 定义数据
// 定时器
timer?: NodeJS.Timeout;
constructor(props: Props) {
super(props)
this.state = {
Button: [
{
id: 'a1',
txt: '按钮一'
},
{
id: 'a2',
txt: '按钮二'
},
{
id: 'a3',
txt: '按钮三'
},
{
id: 'a4',
txt: '按钮四'
},
],
Content: [
{
id: 'b1',
txt: '内容一'
},
{
id: 'b2',
txt: '内容二'
},
{
id: 'b3',
txt: '内容三'
},
{
id: 'b4',
txt: '内容四'
},
],
ButtonIndex: 0
}
}
clearTimer() {
if (this.timer) {
clearTimeout(this.timer)
}
}
componentDidMount() {
this.FnStart()
}
// 开始
FnStart() {
this.timer = setInterval(() => {
this.FnNext()
}, 1500)
}
FnNext() {
let Input =this.state.ButtonIndex
if (Input >= this.state.Button.length - 1){
Input=0
}else{
Input ++
}
this.setState({
ButtonIndex:Input
})
}
FnTab(index: number): void {
this.setState({
ButtonIndex: index
})
}
render() {
return (
<div>这部分代码就是HTML部分<div/>
)
}
}
export default connect((props, state) => Object.assign({}, props, state))(Tab)
本文转载自: https://blog.csdn.net/weixin_60011603/article/details/123552978
版权归原作者 我怎么越吃越瘦 所有, 如有侵权,请联系我们删除。
版权归原作者 我怎么越吃越瘦 所有, 如有侵权,请联系我们删除。