React中MUI多Accordion展开后如何完整显示内容？

问题场景 #

用MUI构建了多个Accordion组件，每个AccordionDetails都设置了height: 80vh，展开某个Accordion后，无法完整查看该组件内的全部内容。

解决方案：useRef + scrollIntoView #

通过React的useRef获取Accordion的DOM节点，在组件展开时触发scrollIntoView()方法，将其滚动到可视区域，确保能看到完整内容。

实现代码 #

import { useState, useRef } from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const MultiAccordion = () => {
  const [expandedPanel, setExpandedPanel] = useState(null);
  const accordionRefs = useRef([]);

  const handleAccordionChange = (panelIndex) => (_, isExpanded) => {
    setExpandedPanel(isExpanded ? panelIndex : null);
    if (isExpanded) {
      // 滚动到当前展开的Accordion顶部
      accordionRefs.current[panelIndex]?.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  };

  return (
    <div>
      {Array.from({ length: 3 }).map((_, idx) => (
        <Accordion
          key={idx}
          ref={el => accordionRefs.current[idx] = el}
          expanded={expandedPanel === idx}
          onChange={handleAccordionChange(idx)}
        >
          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
            <Typography>面板 {idx + 1}</Typography>
          </AccordionSummary>
          <AccordionDetails style={{ height: '80vh' }}>
            <Typography>
              {/* 这里替换为你的长内容 */}
              这是面板 {idx + 1} 的长内容...
              {/* 模拟大量文本 */}
              {Array.from({ length: 50 }).map((_, textIdx) => (
                <p key={textIdx}>示例文本行 {textIdx + 1}</p>
              ))}
            </Typography>
          </AccordionDetails>
        </Accordion>
      ))}
    </div>
  );
};

export default MultiAccordion;

核心逻辑说明 #

• 用useRef数组存储每个Accordion的DOM引用，方便后续获取节点
• 在Accordion的onChange回调中，判断当前面板是否展开，若是则调用scrollIntoView()
• scrollIntoView的配置项behavior: 'smooth'实现平滑滚动，block: 'start'确保面板顶部对齐可视区域

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