折り畳みパネルを動作させるにはどうすればよいですか？

Question

私はreactbootstrapを使用していますが、これを稼働させるためにこのcodepenを作成しようとしましたが、運が悪いわけではありません。その上で何が起こっているか見当もつかない

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

codepenの実装中に間違ったことはほとんどありません。あなたがあなたをshouldn codepenでこれをやろうとしている場合は、Wellコンポーネント

をインポートしませんでしたreact-bootstrap

を使用するために、あなたはあなたのhtmlにbootstrap.min.cssとbootstrap.min.jsをインポートする必要が

1. あなたのコンポーネントをインポートしないでください

   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が必要です。 http://codepen.io/pranesh-r/pen/MbKrRB

・ホープ、このことができます：

は、あなたのHTML

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

の作業フィドルにこれを追加します！