[英]Bootstrap accordion not working properly with 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;
我會回答我的問題。 即使我在粘貼時提到了“ 入門” ,我仍然擁有bootstrap 4 CDN 。 但是通過npm
我安裝了舊版的bootstrap3。這是一個沖突,盡管某些功能(如按鈕)仍然可以使用。 正確的樣式表是這個
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
手風琴代碼看起來不錯。 您是否確定將瀏覽器全局變量添加到index.html。 我很確定手風琴依賴於他們的javascript文件。 但是我確實注意到兩件事。
您的state =
必須在super();
之后放入構造函數中super();
它應該是this.state=
。
您不必像這樣從React Bootstrap單個庫文件導入每個組件。 你可以做
import { Accordion, Panel, Button, ButtonToolbar, Modal, FormGroup, ControlLabel, FormControl} from 'react-bootstrap';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.