React-实现切换tab高亮显示和排序

最新推荐文章于 2025-11-15 18:09:00 发布

原创最新推荐文章于 2025-11-15 18:09:00 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

1、切换className

<div className="tab-list">
  { tabList.map(item => (
    <span key={item.type} className={`tab-box ${item.type === type ? 'active' : ''}`} onClick={() => handleClickTab(item.type)}>{ item.name }</span>
  ))}
</div>

2、classNames优化类名控制

上面1的写法如果类名非常多的情况下比较复杂，我们可以引入classNames优化类名控制

// 安装
npm i classnames

// 引入
import classNames from 'classnames';

// 使用
<div className="tab-list">
  { tabList.map(item => (
    <span key={item.type} className={classNames('tab-box', {active: item.type === type})} 
    onClick={() => handleClickTab(item.type)}>{ item.name }</span>
  ))}
</div>

3、切换时触发重新排序

以下方法切换tab时不会切换排序，因为这里原地修改原数组，但React的setState需要通过新引用触发重新渲染。由于原数组的引用未改变，React无法感知变化

const [commentList, setCommentList] = useState(list.sort((x, y) => new Date(y.ctime) - new Date(x.ctime)))

const [type, setType] = useState('new')
const handleClickTab = (type) => {
  setType(type)
  if (type === 'new') {
    setCommentList(commentList.sort((x, y) => new Date(y.ctime) - new Date(x.ctime)))
  } else {
    setCommentList(commentList.sort((x, y) => y.like - x.like))
  }
}

修改方法一：

setCommentList([...commentList].sort((x, y) => new Date(y.ctime) - new Date(x.ctime)))

修改方法二：函数式更新 => 推荐

setCommentList(prev => prev.sort((x, y) => new Date(y.ctime) - new Date(x.ctime)))

3、完整代码

import { useState } from "react";

const list = [
  { 
    id: 1,
    user: {
      uid: '12244',
      avatar: 'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399',
      uname: '周杰伦'
    },
    content: '哎哟，不错哦',
    ctime: '2021-06-08 19:35:47',
    like: 88
  },
  { 
    id: 2,
    user: {
      uid: '12245',
      avatar: 'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399',
      uname: '林俊杰'
    },
    content: '好听呀',
    ctime: '2021-06-15 19:35:47',
    like: 52
  },
  { 
    id: 3,
    user: {
      uid: '12246',
      avatar: 'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399',
      uname: '周笔畅'
    },
    content: '呵呵哈哈哈',
    ctime: '2021-06-02 19:35:47',
    like: 192
  }
]

const userInfo = {
  uid: '12245',
  avatar: 'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399',
  uname: '林俊杰'
}

const tabList = [
  { type: 'new', name: '最新' },
  { type: 'hot', name: '最热' },
]

function App() {
  const [commentList, setCommentList] = useState(list.sort((x, y) => new Date(y.ctime) - new Date(x.ctime)))
  const handleDelete = (id) => {
    setCommentList(commentList.filter(item => item.id !== id))
  }

  const [type, setType] = useState('new')
  const handleClickTab = (type) => {
    setType(type)
    if (type === 'new') {
      // 不会切换排序，因为这里原地修改原数组，但React的setState需要通过新引用触发重新渲染。由于原数组的引用未改变，React无法感知变化
      // setCommentList(commentList.sort((x, y) => new Date(y.ctime) - new Date(x.ctime)))
      // 修改方法一
      // setCommentList([...commentList].sort((x, y) => new Date(y.ctime) - new Date(x.ctime)))
      // 修改方法二（函数式更新 => 推荐）
      setCommentList(prev => prev.sort((x, y) => new Date(y.ctime) - new Date(x.ctime)))
    } else {
      // setCommentList(commentList.sort((x, y) => y.like - x.like))
      // setCommentList([...commentList].sort((x, y) => y.like - x.like))
      setCommentList(prev => prev.sort((x, y) => y.like - x.like))
    }
  }

  return (
    <div className="App">
      <div className="tab-list">
        { tabList.map(item => (
          <span key={item.type} className={`tab-box ${item.type === type ? 'active' : ''}`} onClick={() => handleClickTab(item.type)}>{ item.name }</span>
        ))}
      </div>
      <div className="user-list">
        { commentList.map((item, index) => (
          <div key={index} className="user-box">
            <img style={{width: 40, height: 40}} src={item.user.avatar} />
            <span>{ item.user.uname }</span>
            <div>{ item.content }</div>
            <div>{ item.ctime }</div>
            <span>点赞数：{ item.like }</span>
            { userInfo.uid === item.user.uid && <button onClick={() => handleDelete(item.id)}>删除</button> }
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;