React.js为数组列表添加阅读更多按钮 实现超3项时内容显隐

实现思路 #

• 用useState维护布尔状态isExpanded标记列表展开状态，默认值为false即折叠态
• 固定初始展示数量阈值为3，当列表总长度≤3时，直接渲染全部列表项，不渲染控制按钮
• 折叠态下通过数组slice(0, 3)方法截取前3项渲染，展开态下渲染全量列表数据
• 按钮文案随展开状态动态切换：折叠时显示「阅读更多」，展开时显示「收起」
• 给按钮绑定点击事件，点击时翻转isExpanded的状态值，触发组件重渲染更新视图

可直接复用的核心代码 #

import { useState } from 'react';

const ListComponent = ({ list = [] }) => {
  // 展开状态控制
  const [isExpanded, setIsExpanded] = useState(false);
  // 初始展示数量阈值
  const VISIBLE_COUNT = 3;
  const total = list.length;

  // 根据当前状态计算需要渲染的列表内容
  const displayList = isExpanded ? list : list.slice(0, VISIBLE_COUNT);

  return (
    <div className="list-container">
      <ul className="list-group">
        {displayList.map(item => (
          // 注意替换为你列表项中实际的唯一id字段，不要用数组下标做key
          <li key={item.id} className="list-item">
            {item.content}
          </li>
        ))}
      </ul>
      {/* 仅列表总数超过阈值时展示切换按钮 */}
      {total > VISIBLE_COUNT && (
        <button
          className="list-toggle-btn"
          onClick={() => setIsExpanded(prev => !prev)}
        >
          {isExpanded ? '收起' : '阅读更多'}
        </button>
      )}
    </div>
  );
};

export default ListComponent;

优化提示 #

• 可将VISIBLE_COUNT、按钮文案等抽为组件props，适配不同列表的复用需求
• 需要动画效果时，可给列表容器加CSS过渡属性，控制高度、透明度变化实现平滑展开收起
• 若列表数据为接口异步返回，需在数据加载完成后重新判断总长度，避免初始空数组导致按钮渲染异常
• 列表项的key必须使用数据唯一标识，禁止使用数组下标，避免增删列表项时出现渲染错乱

内容的提问来源于stack exchange，提问作者Faizal Munna