如何讓摺疊面板工作？

我正在使用reactbootstrap並試圖創建這個codepen讓它工作，但沒有運氣sofar。這是應該打開和關閉面板：如何讓摺疊面板工作？

import { Button } from 'react-bootstrap'; 
import { Panel } from 'react-bootstrap'; 
import { Fade} from 'react-bootstrap'; 
import { Collapse } from 'react-bootstrap'; 
    class App extends React.Component { 
     constructor() { 
     super(); 
     this.state = {}; 
     } 

     render() { 
     return (
      <div> 
      <Button onClick={()=> this.setState({ open: !this.state.open })}> 
       click 
      </Button> 
      <Collapse in={this.state.open}> 
       <div> 
       <Well> 
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
       </Well> 
       </div> 
      </Collapse> 
      </div> 
     ); 
     } 

    };

這是codepen 有在控制檯中沒有錯誤，所以不知道是怎麼回事。

來源

2016-11-11 bier hier

在執行代碼時你犯的錯誤很少。

您需要導入bootstrap.min.css和bootstrap.min.js在HTML才能使用react-bootstrap
你沒有導入Well組件

如果你正在嘗試做的這codepen你不該「T導入您的組件，如

import { Button } from 'react-bootstrap'; 
import { Panel } from 'react-bootstrap'; 
import { Fade} from 'react-bootstrap'; 
import { Collapse } from 'react-bootstrap'; 
import {Well} from 'react-bootstrap';

而應該將它們導入像

var Button = ReactBootstrap.Button; 
    var Panel = ReactBootstrap.Panel; 
    var Fade = ReactBootstrap.Fade; 
    var Collapse = ReactBootstrap.Collapse; 
    var Well = ReactBootstrap.Well;

Codepen Demo

來源

2016-11-11 03:41:31

老兄，它不工作的演示？ –

@bierhier對不起錯誤的演示網址添加。更新它剛剛 –

你知道如何確保內容不會被推下面板下嗎？ –

React bootstrap需求bootstrap.css正常工作。所有的轉換都是基於bootstrap class。所以，bootstrap css是必需的。

添加到您的HTML

https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css

工作小提琴： http://codepen.io/pranesh-r/pen/MbKrRB

希望這有助於！

來源

2016-11-11 04:36:36

這不是我的答案 –

如何讓摺疊面板工作？

回答

相關問題