我来帮你搞定这个折叠切换的问题～你现在的核心问题是没有给每个列表项单独维护展开状态，导致组件不知道什么时候要切换回折叠状态。下面是具体的实现步骤和代码示例：

核心思路 #

Ant Design的Paragraph组件的ellipsis.expanded属性是控制文本展开/折叠状态的关键，而onExpand回调会在用户点击展开/折叠按钮时触发。我们需要给循环渲染的每个Paragraph单独绑定一个状态，这样就能实现独立的展开/折叠切换。

完整代码示例 #

import { useState } from 'react';
import { Typography } from 'antd';

const { Paragraph } = Typography;

const YourComponent = () => {
  // 你的长文本列表
  const listOfLongText = [
    "这里是一段远超两行长度的测试文本，用来验证折叠展开功能。当文本超过两行时，会自动显示省略号，点击展开按钮可以查看全部内容，再次点击就能折叠回两行状态。",
    "这是第二段长文本，同样需要支持独立的展开和折叠操作。每个列表项的状态都是单独维护的，不会互相影响。",
    // 可以继续添加更多文本项
  ];

  // 初始化每个列表项的展开状态，默认都为false（折叠状态）
  const [expandedStates, setExpandedStates] = useState(
    new Array(listOfLongText.length).fill(false)
  );

  // 处理展开/折叠的回调函数
  const handleExpand = (itemIndex, isExpanded) => {
    // 复制状态数组，避免直接修改原状态
    const updatedStates = [...expandedStates];
    // 更新当前点击项的状态
    updatedStates[itemIndex] = isExpanded;
    setExpandedStates(updatedStates);
  };

  return (
    <div className="text-list">
      {listOfLongText.map((text, index) => (
        <Paragraph
          key={index}
          ellipsis={{
            rows: 2,
            expandable: true,
            // 绑定当前项的展开状态
            expanded: expandedStates[index],
            // 点击按钮时触发回调，更新对应项的状态
            onExpand: (isExpanded) => handleExpand(index, isExpanded),
          }}
        >
          {text}
        </Paragraph>
      ))}
    </div>
  );
};

export default YourComponent;

关键细节说明 #

1. 独立状态维护：用数组expandedStates记录每个列表项的展开状态，每个索引对应一个项的状态，确保点击某个项时只会影响自身的展开/折叠。
2. expanded属性：必须给ellipsis配置这个属性，组件才能根据状态切换显示模式——true时显示全部文本，false时折叠回2行并显示省略号。
3. 动态列表适配：如果你的列表是从接口动态获取的，建议用对象来存储状态（比如{ [itemId]: isExpanded }），这样即使列表长度变化也不会出错，示例如下：

// 动态列表的状态维护方式
const [expandedStates, setExpandedStates] = useState({});

const handleExpand = (itemId, isExpanded) => {
  setExpandedStates(prevState => ({
    ...prevState,
    [itemId]: isExpanded
  }));
};

// 渲染时用item的唯一id绑定状态
{dynamicList.map(item => (
  <Paragraph
    key={item.id}
    ellipsis={{
      rows: 2,
      expandable: true,
      expanded: expandedStates[item.id] || false,
      onExpand: (isExpanded) => handleExpand(item.id, isExpanded),
    }}
  >
    {item.text}
  </Paragraph>
))}

这样就能完美实现点击展开、再次点击折叠的效果啦～

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