如何在React Bootstrap的Card组件中添加可折叠Accordion组件？

该需求完全可以实现，代码未生效通常由以下几个问题导致，对应修复方案如下：

• 未引入Bootstrap基础样式
  React Bootstrap组件的交互、样式完全依赖Bootstrap原生CSS文件，漏引入会导致所有组件异常。在项目入口文件（通常为index.js/main.jsx）顶部添加如下代码即可：

  import 'bootstrap/dist/css/bootstrap.min.css'
  

• 版本不匹配
  你使用的Accordion语法是React Bootstrap v2+的标准写法，若项目安装的是v1版本会直接失效。运行如下命令检查当前版本：

  npm list react-bootstrap
  

  若版本低于2.0.0，执行升级命令即可：

  npm install react-bootstrap@latest bootstrap@latest
  

• 嵌套结构不符合HTML规范
  你将Accordion放在了Card.Text内部，而Card.Text默认渲染为<p>标签，HTML规范不允许在<p>标签内嵌套块级元素，会导致浏览器解析DOM结构异常，直接把Accordion移到Card.Text外部即可。

修正后完整代码示例 #

import Accordion from 'react-bootstrap/Accordion'
import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import { Link } from 'react-router-dom'

return (
  <Card className="cardClass">
    <Card.Img  className="card-image" variant="top" src={movie.ImagePath} />
    <Card.Body>
      <Card.Title>{movie.Title}</Card.Title>
      <Card.Text>{movie.Genre.Name}</Card.Text>
      {/* alwaysOpen属性可实现单个折叠项独立控制，不受手风琴互斥逻辑影响 */}
      <Accordion alwaysOpen>
        <Accordion.Item eventKey="0">
          <Accordion.Header>Summary</Accordion.Header>
          <Accordion.Body>
            {movie.Description}
          </Accordion.Body>
        </Accordion.Item>
      </Accordion>
      <div className="card-btns">
        <Link to={`/movies/${movie._id}`}>
          <Button className="movieCard-btn" variant="primary">View Movie</Button>
        </Link>
        <Button className="movieCard-btn" variant="primary" value={movie._id} onClick={(e) => this.addFavoriteMovie(movie)}>Add Favorite</Button>
      </div>
    </Card.Body>
  </Card>
);

可选轻量化方案 #

如果仅需要单个区域折叠、不需要多折叠项互斥的手风琴效果，也可以使用React Bootstrap提供的更轻量化的Collapse组件实现，代码冗余度更低。

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