React父组件统一设置map渲染的所有折叠文件夹状态问题

你当前用单个folderRef给所有循环渲染的子组件赋值，循环过程中每次都会覆盖ref.current的指向，最终folderRef只会关联最后一个<CollapsableFolderListItem>，所以点击按钮时只能操作最后一个子组件。

方案一：状态提升（推荐，符合React单向数据流） #

把所有文件夹的展开状态统一放到父组件维护，子组件通过props接收状态和状态修改方法，避免命令式操作子组件内部状态。

父组件代码 #

import { useState, useEffect } from 'react';

// 父组件
const ParentComponent = ({ folders }) => {
  // 用对象存储每个文件夹的展开状态，key为文件夹id
  const [folderOpenStates, setFolderOpenStates] = useState({});

  // 初始化所有文件夹为关闭状态（可选，根据业务需求调整）
  useEffect(() => {
    if (folders) {
      const initialStates = folders.reduce((acc, folder) => {
        acc[folder.id] = false;
        return acc;
      }, {});
      setFolderOpenStates(initialStates);
    }
  }, [folders]);

  // 收起所有文件夹的方法
  const handleCollapseAllFolders = () => {
    const collapsedStates = Object.keys(folderOpenStates).reduce((acc, id) => {
      acc[id] = false;
      return acc;
    }, {});
    setFolderOpenStates(collapsedStates);
  };

  // 单个文件夹的展开/收起切换方法
  const toggleFolder = (folderId) => {
    setFolderOpenStates(prev => ({
      ...prev,
      [folderId]: !prev[folderId]
    }));
  };

  return (
    <>
      <IconButton onClick={handleCollapseAllFolders}>
        <UnfoldLessIcon />
      </IconButton>
      {folders &&
        folders.map(folder => (
          <CollapsableFolderListItem
            key={folder.id}
            name={folder.name}
            content={folder.content}
            id={folder.id}
            isOpen={folderOpenStates[folder.id] || false}
            onToggle={() => toggleFolder(folder.id)}
          />
        ))}
    </>
  );
};

子组件代码 #

// 子组件不再维护内部状态，完全通过props接收状态和交互方法
const CollapsableFolderListItem = ({ name, content, isOpen, onToggle }) => {
  return (
    <div className="folder-item" onClick={onToggle}>
      {/* 根据isOpen控制图标或文字展示 */}
      <span>{isOpen ? '📂' : '📁'}</span> {name}
      {/* 展开时显示内容 */}
      {isOpen && <div className="folder-content">{content}</div>}
    </div>
  );
};

方案二：使用Ref数组（命令式操作，适合特殊场景） #

如果必须保留子组件内部的状态管理，可以用Ref数组存储每个子组件的实例，遍历调用子组件暴露的方法。

父组件代码 #

import { useRef, useEffect } from 'react';

// 父组件
const ParentComponent = ({ folders }) => {
  // 创建Ref数组存储每个子组件实例
  const folderRefs = useRef([]);

  // 确保数组长度和文件夹列表同步，避免残留无效ref
  useEffect(() => {
    folderRefs.current = folderRefs.current.slice(0, folders?.length || 0);
  }, [folders]);

  // 遍历所有子组件ref，调用收起方法
  const handleCollapseAllFolders = () => {
    folderRefs.current.forEach(ref => {
      if (ref) {
        ref.handleCloseAllFolders();
      }
    });
  };

  return (
    <>
      <IconButton onClick={handleCollapseAllFolders}>
        <UnfoldLessIcon />
      </IconButton>
      {folders &&
        folders.map((folder, index) => (
          <CollapsableFolderListItem
            key={folder.id}
            name={folder.name}
            content={folder.content}
            id={folder.id}
            // 将每个子组件的ref存入数组对应位置
            ref={el => folderRefs.current[index] = el}
          />
        ))}
    </>
  );
};

子组件代码（保持原有逻辑不变） #

import { useState, useImperativeHandle, forwardRef } from 'react';

// 注意子组件需要用forwardRef包裹
const CollapsableFolderListItem = forwardRef(({ name, content, id }, ref) => {
  const [isFolderOpen, setIsFolderOpen] = useState(false);

  // 暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    handleCloseAllFolders: () => setIsFolderOpen(false),
  }));

  // 子组件内部的切换逻辑
  const toggleFolder = () => {
    setIsFolderOpen(prev => !prev);
  };

  return (
    <div className="folder-item" onClick={toggleFolder}>
      <span>{isFolderOpen ? '📂' : '📁'}</span> {name}
      {isFolderOpen && <div className="folder-content">{content}</div>}
    </div>
  );
});

• 状态提升：符合React声明式编程思想，逻辑集中易维护，是优先推荐的方案。
• Ref数组：属于命令式操作，打破了React的单向数据流，适合子组件有复杂内部状态且无法迁移到父组件的特殊场景。

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