2017-12-26 9 views
0

Modalreact-bootstrapから画面にレンダリングすることができません。 DOMノードはDOMツリーに追加されていますが、画面に表示したくありません。
これはModalをホストするクラスのコードです。別のコンポーネントの状態を渡しています(このコンポーネントの状態をModalで変更したい)。リアブートストラップモーダルが表示されない

class ChangeModal extends React.Component{ 

    constructor(props){ 
     super(props); 
    } 

    render(){ 

     return(
      <Modal show={this.props.state.showModal} onHide={this.props.close}> 
       <Modal.Header closeButton> 
        <Modal.Title>Modal heading</Modal.Title> 
       </Modal.Header> 
       <Modal.Body> 
        <h4>{this.props.state.id}</h4> 

      </Modal.Body> 
       <Modal.Footer> 
        <Button onClick={this.props.close}>Close</Button> 
       </Modal.Footer> 
      </Modal> 
     ); 
    } 
} 
+0

'state'は' props'の内部にありますか?レンダリングの価値は何ですか? – Jason

+0

この 'Modal'は、ページ上の複数のコンポーネントにある' button'によって呼び出されています。ボタンを押すと、ツリー上に作成された「モーダル」が見えますが、それは見えません。また、Inspectorを使って、レンダリングされた各要素のアウトラインを見ることができますが、ただ見えません。 'id'の値は' Modal'が呼び出されているコンポーネントの各 'state'に対応しています。 – Justplayit

+0

私は、 'dialog'というロールを持つモーダルを保持する' div'が 'height'の' 0'を持っていることを知りましたが、これを防ぐ方法はわかりません。 – Justplayit

答えて

0

このライブラリなどは、Bootstrap v4 beta 2が提供している適切な構文を使用していないようです。クラス名がこのバージョンのBootstrapのものと一致しません

+0

反応起動ストラップはブートストラップ3のCSSクラスを使用していると私は信じています。 https://github.com/react-bootstrap/react-bootstrap/issues/1187 – Jason