Как я могу заставить панель свернуть работать?

Question

Я использую responsebootstrap и пытаюсь создать этот код, чтобы заставить его работать, но не удачи 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 Там нет ошибок в консоли, так понятия не имеют, что происходит.

Answer 1

Так мало ошибок, которые вы совершили при реализации кодекса.

1. Вам нужно импортировать bootstrap.min.css и bootstrap.min.js в вашем HTML, чтобы использовать react-bootstrap

2. Вы не импортировали Well компонент

3. Если вы пытаетесь сделать это в codepen вы не должны импортировать ваши компоненты, такие как

   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

Answer 2

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

Надеется, что это помогает!