Twitter bootstrap 引导式手风琴无法与react一起正常工作

我对反应和引导非常陌生。我遇到了一个手风琴不能正常工作的问题。它没有颜色，当我点击它时，它会快速滑动然后消失。我看过了，但没用。我错过了什么

这是我的密码，提前谢谢

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;

import React，{Component}来自'React'；
导入“./App.css”
从“react bootstrap/lib/Accordion”导入手风琴
从“react bootstrap/lib/Panel”导入面板
从“react bootstrap/lib/Button”导入按钮
从“react bootstrap/lib/ButtonToolbar”导入ButtonToolbar
从“react bootstrap/lib/Modal”导入模态
从“react bootstrap/lib/FormGroup”导入FormGroup
从'react bootstrap/lib/ControlLabel'导入ControlLabel
从“react bootstrap/lib/FormControl”导入FormControl
类应用程序扩展组件{
状态={
食谱：[
{recipeName:'recipe1'，成分：['cheese'，'cheese'，'cheese']}，
{recipeName:'recipe2'，成分：['cheese'，'cheese'，'cheese']}，
{recipeName:'recipe3'，成分：['cheese'，'cheese'，'cheese']}
]
}
render（）{
const{recipes}=this.state；
返回(
{recipes.map（（recipe，index）=>(
{recipe.components.map（（项目）=>(
{item}
))}
))}
);
}
}
导出默认应用程序；

手风琴密码看起来不错。是否确保将添加到index.html。我很确定手风琴依赖于他们的javascript文件。然而，有两件事我确实注意到了

您的

state=

需要位于

super（）之后的构造函数中应该是
this.state=

您不必像这样从React Bootstrap单个库文件中导入每个组件。你可以这样做

导入{
手风琴，
面板
按钮
巴顿托巴，
情态动词
FormGroup，
控制标签，
来自“react bootstrap”的FormControl}

---

我会回答我的问题。即使我在粘贴时在剪贴板上引用了，我仍然有。然而，通过

npm

我安装了一个较旧版本的bootstrap3。这是一个冲突，尽管一些功能，如按钮，仍然可以工作。正确的样式表是这样的

---

关于（2），我相信这是一个很好的做法，为了减少捆绑包的大小，我看到了我的错误，尽管我在剪贴板上提到了[getting started]（），但我仍然有[bootstrap 4 CDN]（）。这一定是一场冲突。很高兴你解决了。