ReactJS中如何实现多个独立的read more/read less折叠展开功能

问题原因 #

你当前的代码仅声明了一个全局的readMore状态，所有分类项共用这一个状态控制展开/收起，所以只要状态变化，所有分类都会同步切换。

解决方案 #

可以用「存储当前展开项的索引」的方式实现独立控制，如果你需要支持多个分类同时展开，也可以改用Set/对象存储多个展开项标识。以下是单条展开的修正代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
// 别忘了导入你项目中使用的Link组件

export function FullReport(props) {
  // 替换原来的全局readMore状态，用expandedIndex存当前展开的分类索引，null代表无展开项
  const [expandedIndex, setExpandedIndex] = useState(null);
  const [categories, setCategories] = useState([]);
   
  useEffect(() => {
      try {
        axios.get(`/getReportDetails`)
          .then((response) => {
            const serverData = response.data.data;
            setCategories(serverData.categoryDetails || []);
          });
      } catch (e) {
        console.error(e)
      }
    // 修复原代码依赖数组语法错误，留空代表只在组件挂载时执行一次请求即可
  }, []);

  return (
    <div>
      {categories.map((sitems, ssindex) => {
        // 对应当前项是否处于展开状态
        const isExpanded = expandedIndex === ssindex;
        return (
          <React.Fragment key={ssindex}>
            <p>{sitems.name}</p>
            <p>
              {!isExpanded && sitems?.description?.substring(0, 201)}
              {isExpanded && sitems?.description}
              {sitems?.description?.length > 201 && (
                <Link
                  to="#"
                  className="read-more-link"
                  onClick={(e) => {
                    e.preventDefault();
                    // 点击时判断：如果当前项已经展开则收起，否则展开当前项
                    setExpandedIndex(isExpanded ? null : ssindex);
                  }}
                >
                  {isExpanded ? "...Read Less" : "...Read More"}
                </Link>
              )}
            </p>
          </React.Fragment>
        )
      })}
   </div>
  )
}

如果你需要支持多个分类同时展开，只需要把状态改为Set类型即可：

// 初始化存储展开项的Set
const [expandedSet, setExpandedSet] = useState(new Set());

// 点击事件修改为
onClick={(e) => {
  e.preventDefault();
  const newSet = new Set(expandedSet);
  if (newSet.has(ssindex)) {
    newSet.delete(ssindex);
  } else {
    newSet.add(ssindex);
  }
  setExpandedSet(newSet);
}}

// 判断展开的逻辑改为
const isExpanded = expandedSet.has(ssindex);

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