点击按钮时如何加载map函数渲染的更多列表项

实现方案 #

核心逻辑是用React状态控制切片的结束位置，初始值设为5，点击按钮时更新为数组总长度即可，同时优化了按钮的显示逻辑（数组长度不超过5时自动隐藏按钮），另外修正了原代码中class要写为className的React语法问题。

import { useState } from 'react';

const Second = ({container}) => {
  // 初始化展示条数为5
  const [showCount, setShowCount] = useState(5);
  // 容器数组不存在时提前返回，避免后续报错
  if (!container) return null;

  return(
    <div>
      {container.slice(0, showCount).map((item, index) => (
        // 注意map渲染要加唯一key，这里用索引仅做示例，业务中建议用数组项的唯一标识
        <h3 key={index}>{item}</h3>
      ))}
      {/* 仅当数组长度大于当前展示数时显示按钮 */}
      {container.length > showCount && (
        <button 
          type="button" 
          className="btn btn-primary"
          onClick={() => setShowCount(container.length)}
        >
          展示全部
        </button>
      )}
    </div>
 )
}

• 如果你需要做展开/收起的切换效果，只需要修改点击事件的逻辑，判断当前showCount是5还是数组总长度，对应切换即可
• 原代码中map的参数名和props重名了，这里修改为item避免命名冲突

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