Modal
をreact-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>
);
}
}
'state'は' props'の内部にありますか?レンダリングの価値は何ですか? – Jason
この 'Modal'は、ページ上の複数のコンポーネントにある' button'によって呼び出されています。ボタンを押すと、ツリー上に作成された「モーダル」が見えますが、それは見えません。また、Inspectorを使って、レンダリングされた各要素のアウトラインを見ることができますが、ただ見えません。 'id'の値は' Modal'が呼び出されているコンポーネントの各 'state'に対応しています。 – Justplayit
私は、 'dialog'というロールを持つモーダルを保持する' div'が 'height'の' 0'を持っていることを知りましたが、これを防ぐ方法はわかりません。 – Justplayit