为什么 Bootstrap 手风琴在 React 中不起作用？答案

【问题标题】：Why is Bootstrap accordion not working in React?为什么 Bootstrap 手风琴在 React 中不起作用？
【发布时间】：2021-02-23 19:41:59
【问题描述】：

我已经使用 React 和 react-bootstrap 启动了一个新应用程序。 App.js 文件之外只有一个组件。内容：

import React from 'react';
import { Accordion, Button, Card } from 'react-bootstrap';

const accordionDemo = (props) => (
  <Accordion defaultActiveKey="0">
    <Card>
      <Card.Header>
        <Accordion.Toggle as={Button} variant="link" eventKey="0">
          Card one
        </Accordion.Toggle>
      </Card.Header>
      <Accordion.Collapse eventKey="0">
        <Card.Body>Body of Card One.</Card.Body>
      </Accordion.Collapse>
    </Card>
    <Card>
      <Card.Header>
        <Accordion.Toggle as={Button} variant="link" eventKey="1">
          Card two
        </Accordion.Toggle>
      </Card.Header>
      <Accordion.Collapse eventKey="1">
        <Card.Body>Body of Card Two.</Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>
  );
  
  export default accordionDemo;

这会为代码中的每张卡片显示一个按钮和文本。除了在控制台中创建警告之外，这些按钮不执行任何操作：index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode.

警告应该被打破，对吧？
这是一个 react-bootstrap 范围的问题吗？或者可能是 Boottstrap？
我需要手动导入一些 CSS 吗？我以为 React 组件已经带有这种样式了。

【问题讨论】：

标签： react-bootstrap

【解决方案1】：

所以我很愚蠢。我没有将引导程序 scss 导入到我的主 scss 文件中。而且……这就是一切。

因此，答案是肯定的，在使用 react-bootstrap 时确实需要单独导入 CSS —— 根据 https://react-bootstrap.github.io/getting-started/introduction/

【讨论】：