Wie kann ich das Kollapspanel zum Funktionieren bringen?

Question

Ich benutze reactbootstrap und habe versucht, diesen Codepen zu erstellen, um es funktionieren zu lassen, aber kein Glück sofar. Dies ist das Gremium, das angeblich zu öffnen und zu schließen:

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> 
     ); 
     } 

    }; 

Dies ist codepen Es gibt keine Fehler in der Konsole haben so keine Ahnung, was los ist.

Answer 1

So wenige Fehler, die Sie bei der Implementierung des Codepens gemacht haben.

1. Sie benötigen bootstrap.min.css und bootstrap.min.js in Ihrem HTML importieren, um react-bootstrap

2. Sie die Well Komponente

3. importieren nicht verwenden Wenn Sie dies versuchen, in tun codepen Sie shouldn 't importieren Sie Ihre Komponenten wie

   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'; 
   

stattdessen sollten Sie sie wie

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

Codepen Demo

Answer 2

React bootstrap Bedürfnisse bootstrap.css importieren ordnungsgemäß funktioniert. Alle Übergänge sind bootstrap class basiert. Also, bootstrap css ist erforderlich.

Fügen Sie diese auf Ihre HTML

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

Arbeits Geige: http://codepen.io/pranesh-r/pen/MbKrRB

hoffe, das hilft!