如何实现点击过滤列表项时仅显示对应Div元素

需求说明 #

我有三个过滤选项（ALL、UPCOMING、SOLDOUT），需要实现点击列表项时仅显示对应的内容Div：

• 点击ALL时，只展示itemList区域，隐藏其他内容Div；
• 点击UPCOMING时，只展示ListUpcomingItems区域，隐藏其他内容Div；
• 点击SOLD OUT时，展示对应的售罄内容区域，隐藏其他内容Div。

原代码问题 #

原代码仅定义了点击事件，但没有通过状态控制内容的显示与隐藏，无法实现切换效果。

解决方案（React实现） #

通过React的useState钩子管理当前选中的过滤状态，根据状态值条件渲染对应内容：

import { useState } from 'react';
import { Link } from 'react-router-dom';

// 假设已有ItemCard组件和numberWithDots工具函数

function DropFilter() {
  // 定义状态跟踪当前选中的过滤类型，初始值为'all'
  const [activeFilter, setActiveFilter] = useState('all');

  return (
    <>
      <div className='itemFilterSortContainer'>
        <ul className='filter-drops'>
          <li onClick={() => setActiveFilter('all')}>ALL</li>
          <li onClick={() => setActiveFilter('upcoming')}>UPCOMING</li>
          <li onClick={() => setActiveFilter('soldout')}>SOLD OUT</li>
        </ul>
      </div>

      {/* ALL内容区域：仅当activeFilter为'all'时显示 */}
      {activeFilter === 'all' && (
        <div className='itemList'>
          {drops.filter(drop => drop.releaseDate).map(i => (
            <Link to={`/marketplace/drops/${i.itemId}`} key={`${i.itemId}`}>
              <ItemCard
                item={i}
                firstLabel='lowest ask'
                firstValue={i.minPrice ? `${numberWithDots(i.minPrice)} $` : ''}
                secondLabel='listings'
                secondValue={i.listingsCount ? i.listingsCount.toString() : ''}
              />
            </Link>
          ))}
        </div>
      )}

      {/* UPCOMING内容区域：仅当activeFilter为'upcoming'时显示 */}
      {activeFilter === 'upcoming' && (
        <div className='ListUpcomingItems'>
          {drops.filter(drop => drop.releaseDate && drop.listingsCount === 0).map(i => (
            <Link to={`/marketplace/drops/${i.itemId}`} key={`${i.itemId}`}>
              <ItemCard
                item={i}
                firstLabel='lowest ask'
                firstValue={i.minPrice ? `${numberWithDots(i.minPrice)} $` : ''}
                secondLabel='listings'
                secondValue={i.listingsCount ? i.listingsCount.toString() : ''}
              />
            </Link>
          ))}
        </div>
      )}

      {/* SOLD OUT内容区域：补充原代码缺失部分，需根据实际业务逻辑调整过滤条件 */}
      {activeFilter === 'soldout' && (
        <div className='ListSoldOutItems'>
          {drops.filter(drop => drop.releaseDate && /* 替换为售罄判断条件 */).map(i => (
            <Link to={`/marketplace/drops/${i.itemId}`} key={`${i.itemId}`}>
              <ItemCard
                item={i}
                firstLabel='lowest ask'
                firstValue={i.minPrice ? `${numberWithDots(i.minPrice)} $` : ''}
                secondLabel='listings'
                secondValue={i.listingsCount ? i.listingsCount.toString() : ''}
              />
            </Link>
          ))}
        </div>
      )}
    </>
  );
}

export default DropFilter;

关键说明 #

• 状态管理：用activeFilter记录当前选中的过滤选项，点击列表项时直接更新状态；
• 条件渲染：通过{activeFilter === 'xxx' && <div>}的语法，仅渲染当前选中的内容区域；
• 代码简化：移除原冗余的单独函数定义，直接在点击事件中更新状态；
• 售罄区域补充：原代码未包含SOLDOUT对应内容Div，需根据实际业务逻辑完善过滤条件和渲染内容。

内容的提问来源于stack exchange，提问作者Ado Haznadarevic