React中如何仅展示数据集对象列表前10项并实现展开功能

你的问题在于当前的ReadMoreReadLess组件只是单纯包裹了所有子元素，没有实现列表截断的逻辑，而且渲染列表时的结构也有问题（每个<li>都嵌套在单独的<ul>里）。下面是修正后的完整方案：

1. 重构ReadMoreReadLess组件 #

让组件直接接收列表数据和截断数量，内部处理显示逻辑：

import React, { useState } from 'react';

const ReadMoreReadLess = ({ items, showCount = 10 }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpand = () => {
    setIsExpanded(prev => !prev);
  };

  // 根据状态筛选要显示的项
  const displayedItems = isExpanded ? items : items.slice(0, showCount);

  // 只有当列表长度超过显示数量时才显示按钮
  const shouldShowButton = items.length > showCount;

  return (
    <div className='readMore_readLess'>
      <ul>
        {displayedItems.map(item => (
          <li key={item.id}>{item.info}</li>
        ))}
      </ul>
      {shouldShowButton && (
        <button onClick={toggleExpand}>
          {isExpanded ? '收起' : '查看更多'}
        </button>
      )}
    </div>
  );
};

export default ReadMoreReadLess;

2. 正确使用组件 #

调整渲染代码，直接传入数据集的text数组：

<div className="services__service__description">
  {data.map(service => (
    <ReadMoreReadLess key={service.type} items={service.text} />
  ))}
</div>

关键修正点说明 #

• 结构修复：把所有<li>放在同一个<ul>下，符合HTML列表的正确结构。
• 截断逻辑：使用slice(0, showCount)获取前N项，展开时显示全部。
• 按钮智能显示：只有当列表长度超过设定的显示数量时，才渲染"查看更多"按钮，避免无意义的按钮。
• 状态语义化：把ReadMoreShown改为isExpanded，更符合状态含义；按钮文字随状态切换。

这样就能实现初始显示前10项，点击按钮切换显示全部/收起的效果了。

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