函数组件Hook+Ts 选项卡

ts代码：

import { useState} from "react";
import './Tab.less'
interface iButtonList {
    ID: string
    text: string
}
export default function Fn() {
    const [ButtonList] = useState<iButtonList[]>([
        {
            ID: 'bt1',
            text: '按钮一'
        },
        {
            ID: 'bt2',
            text: '按钮二'
        },
        {
            ID: 'bt3',
            text: '按钮三'
        },

    ])
    const [ContentList] = useState<iButtonList[]>([
        {
            ID: 'cont1',
            text: '内容一'
        },
        {
            ID: 'cont2',
            text: '内容二'
        },
        {
            ID: 'cont3',
            text: '内容三'
        },

    ])
    const [Index, setIndex] = useState<number>(0)
    const FnNow = (index: number) => {
        setIndex(index)
        console.log(setIndex);
    }

    return (
        <div className="Tab">
            {
                ButtonList.map((item, index) =>
                    <button className={Index === index ? 'ac' : ''} key={item.ID} onClick={() => FnNow(index)}>{item.text}</button>
                )
            }
            {
                ContentList.map((item, index) =>
                    <div className="content " key={item.ID} style={{ display: Index === index ? 'block' : 'none' }}>{item.text}</div>
                )
            }

       
        </div >

    )
}

less：

.Tab{
    button{
        border: 1px solid #000;
    }
    button.ac{
        background-color: aqua;
    }
    .content{
        margin: 0;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        display: none;

    }
 
}