Bootstrap 手风琴无法与 React 一起正常工作

Question

我对反应还很陌生，bootstrap。我运行遇到手风琴无法正常工作的问题。它没有颜色，当我单击它时它会快速滑动然后消失。我看过 getting started 但没有帮助。我错过了什么。

这是我的代码，在此先感谢

import React, { Component } from 'react';
import './App.css'
import Accordion from 'react-bootstrap/lib/Accordion'
import Panel from 'react-bootstrap/lib/Panel'
import Button from 'react-bootstrap/lib/Button'
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'
import Modal from 'react-bootstrap/lib/Modal'
import FormGroup from 'react-bootstrap/lib/FormGroup'
import ControlLabel from 'react-bootstrap/lib/ControlLabel'
import FormControl from 'react-bootstrap/lib/FormControl'

class App extends Component {

state = {
    recipes: [
    {recipeName: 'recipe1', Ingredients: ['cheese', 'cheese', 'cheese']},
    {recipeName: 'recipe2', Ingredients: ['cheese', 'cheese', 'cheese']},
    {recipeName: 'recipe3', Ingredients: ['cheese', 'cheese', 'cheese']}
    ]
}

  render() {
    const {recipes} = this.state;
    return (
      <div className="App container">
    <Accordion>
        {recipes.map((recipe, index)=>(
            <Panel header={recipe.recipeName} eventKey={index} key={index}>
                <ol>
                    {recipe.ingredients.map((item)=>(
                        <li key={item}>{item}</li>
                    ))}
                </ol>
            </Panel >
        ))}
    </Accordion>
      </div>
    );
  }
}
export default App;

Answer 1

手风琴代码看起来不错。您确定将 browser globals 添加到 index.html 了吗？我很确定 Accordion 依赖于他们的 javascript 文件。但是我确实注意到了两件事。

你的 state = 需要在 super(); 之后的构造函数中，它应该是 this.state=.
您不必像这样从 React Bootstrap 单个库文件中导入每个组件。你可以改为

import { Accordion, Panel, Button, ButtonToolbar, Modal, FormGroup, ControlLabel, FormControl} from 'react-bootstrap';

Answer 2

我会回答我的问题。尽管我提到了 getting started On the clipboard as I pasted, I still had bootstrap 4 CDN。然而，通过 npm 我安装了旧版本的 bootstrap 3。这是一个冲突，尽管按钮等一些功能仍然可以使用。正确的样式表是这个

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Bootstrap 手风琴无法与 React 一起正常工作

Bootstrap accordion not working properly with react

twitter-bootstrap

ecmascript-6

reactjs

react-bootstrap