React-Bootstrap Accordion报错求助及替代实现方案咨询

先修复你当前的代码错误 #

你遇到的TypeError: Cannot read properties of undefined (reading 'item')是因为代码里几个低级错误：

• 导入方式错误：react-bootstrap的Accordion是默认导出，不是命名导出
• 组件名称大小写错误：React组件必须大写开头，Accordion.item要写成Accordion.Item，同理header→Header，body→Body
• 属性拼写错误：defulatActivateKey应该是defaultActiveKey

修复后的代码：

import React from 'react'
import Accordion from 'react-bootstrap/Accordion';
import { ToastContainer } from 'react-toastify';

const MyAccordion = () => {
  return (
    <>
      <Accordion defaultActiveKey="0" className='mt-5 p-3'>
        <Accordion.Item eventKey="0" className="item" >
          <Accordion.Header>Accordion Header #1</Accordion.Header>
          <Accordion.Body>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2" className="item">
          <Accordion.Header>Accordion Header #2</Accordion.Header>
          <Accordion.Body>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="3" className="item">
          <Accordion.Header>Accordion Header #3</Accordion.Header>
          <Accordion.Body>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </Accordion.Body>
        </Accordion.Item>
      </Accordion>
      <ToastContainer />
    </>
  )
}

export default MyAccordion

替代方案 #

如果不想用react-bootstrap，这里给几个可行的选择：

1. 原生Bootstrap Accordion（纯HTML+CSS+少量JS） #

直接用Bootstrap原生组件，自己控制展开状态，无需依赖react-bootstrap：

import React, { useState } from 'react';
import { ToastContainer } from 'react-toastify';

const MyAccordion = () => {
  const [activeKey, setActiveKey] = useState('0');

  const toggleAccordion = (key) => {
    setActiveKey(activeKey === key ? null : key);
  };

  return (
    <>
      <div className="accordion mt-5 p-3" id="accordionExample">
        <div className="accordion-item">
          <h2 className="accordion-header">
            <button
              className={`accordion-button ${activeKey !== '0' ? 'collapsed' : ''}`}
              type="button"
              onClick={() => toggleAccordion('0')}
            >
              Accordion Header #1
            </button>
          </h2>
          <div
            id="collapseOne"
            className={`accordion-collapse collapse ${activeKey === '0' ? 'show' : ''}`}
          >
            <div className="accordion-body">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
          </div>
        </div>
        <div className="accordion-item">
          <h2 className="accordion-header">
            <button
              className={`accordion-button ${activeKey !== '1' ? 'collapsed' : ''}`}
              type="button"
              onClick={() => toggleAccordion('1')}
            >
              Accordion Header #2
            </button>
          </h2>
          <div
            id="collapseTwo"
            className={`accordion-collapse collapse ${activeKey === '1' ? 'show' : ''}`}
          >
            <div className="accordion-body">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>
          </div>
        </div>
      </div>
      <ToastContainer />
    </>
  );
};

export default MyAccordion;

2. 手写极简Accordion组件 #

完全自定义，无需任何UI库依赖，样式可按需调整：

import React, { useState } from 'react';
import { ToastContainer } from 'react-toastify';

const AccordionItem = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="border rounded mb-2">
      <button
        className="w-full p-3 text-left bg-gray-100 hover:bg-gray-200 focus:outline-none"
        onClick={() => setIsOpen(!isOpen)}
      >
        {title}
        <span className="float-right">{isOpen ? '▼' : '▶'}</span>
      </button>
      {isOpen && <div className="p-3 border-t">{children}</div>}
    </div>
  );
};

const MyAccordion = () => {
  return (
    <>
      <div className="mt-5 p-3">
        <AccordionItem title="Accordion Header #1">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </AccordionItem>
        <AccordionItem title="Accordion Header #2">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </AccordionItem>
        <AccordionItem title="Accordion Header #3">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </AccordionItem>
      </div>
      <ToastContainer />
    </>
  );
};

export default MyAccordion;

3. 使用Material-UI的Accordion #

如果项目已经在用MUI生态，直接用它的Accordion组件：

import React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { ToastContainer } from 'react-toastify';

const MyAccordion = () => {
  return (
    <>
      <div className="mt-5 p-3">
        <Accordion>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography>Accordion Header #1</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </Typography>
          </AccordionDetails>
        </Accordion>
        <Accordion>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel2a-content"
            id="panel2a-header"
          >
            <Typography>Accordion Header #2</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </Typography>
          </AccordionDetails>
        </Accordion>
      </div>
      <ToastContainer />
    </>
  );
};

export default MyAccordion;

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