渲染Tab+点击高亮实现-526互联

案例代码

const style = {
  active: {
    border: '1px solid red';
  }
}

import {useState} from "react";

const tabs = [
    {
        type: 'hot',
        text: '最热'
    },
    {
        type: 'time',
        text: '最新'
    }
]

function App() {
    const [type, setType] = useState('hot');
    const handleTabChange = (type) => {
        setType(type)
        console.log('type::: ', type)
    }
    return (
        <div className="App">
            {/*点击谁就把谁的type记录下来*/}
            {/*通过记录的type和每一项遍历的时候的type进行匹配，控制激活类的显示*/}
            {
                tabs.map(item =>
                    <span key={item.type}
                          onClick={() => handleTabChange(item.type)}
                          className={`nav-item ${type === item.type &&  style.active}`}>{item.text}</span>)
            }
        </div>
    );
}

export default App;

Tab

例子tab