反应引导模式未显示答案

【问题标题】：react bootstrap modal not showing反应引导模式未显示
【发布时间】：2022-03-06 00:40:27
【问题描述】：

我想显示react-bootstrap-modal，但只有覆盖出现并且模态不显示

import Modal from 'react-bootstrap-modal';
......
 <Modal
                    show={this.state.open}
                    onHide={this.closeModal}
                    aria-labelledby="ModalHeader"
                >
                    <Modal.Header closeButton>
                        <Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>Some Content here</p>
                    </Modal.Body>
                    <Modal.Footer>
                        // If you don't have anything fancy to do you can use
                        // the convenient `Dismiss` component, it will
                        // trigger `onHide` when clicked
                        <Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>

                        // Or you can create your own dismiss buttons
                        <button className='btn btn-primary'>
                            Save
                        </button>
                    </Modal.Footer>
                </Modal>
.....

截图：

【问题讨论】：

谢谢！当我将现有的 bootstrap 3 + react-bootstrap 应用程序更新到 bootstrap 4 时，我花了几个小时试图解决这个问题。结果证明这是解决方案。（而且这个未解决且显然长期存在的问题确实让我对 react-bootstrap 感到厌烦。我不会在任何新应用程序上使用它。）

标签： reactjs bootstrap-modal

【解决方案1】：

动画使用似乎有问题 animation={false} <Modal animation={false}> </Modal>

【讨论】：

【解决方案2】：

快 2 年了，错误仍然存在。已接受答案中提到的错误已关闭，没有任何解决方案。

导致此行为的主要问题是背景正确应用了“淡入淡出”类，但同样的类也应用于模态。使模态不可见。

要克服这个问题，请强制覆盖“fade”类设置的不透明度。

<Modal style={{opacity:1}}> </Modal>

【讨论】：

【解决方案3】：

我的解决办法是

    class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modal: false
        };
        this.toggle = this.toggle.bind(this);
    };

    toggle() {
        this.setState({modal: !this.state.modal});
    }

    render() {
        return (
            <div>
                <button onClick={ this.toggle}>Contact Us</button>
                <Modal isOpen={this.state.modal} fade={false}
                       toggle={this.toggle} style={{width: "200px", display: "block"}}>
                    <ModalHeader toggle={this.toggle}>
                        Modal title
                    </ModalHeader>
                    <ModalBody>
                        Lorem ipsum dolor sit amet,
                    </ModalBody>
                    <ModalFooter>
                        <Button onClick={this.toggle}>
                            Do Something
                        </Button>{' '}
                        <Button onClick={this.toggle}>Cancel</Button>
                    </ModalFooter>
                </Modal>
            </div>
        );
    }
}

【讨论】：

我添加淡入淡出是假的

【解决方案4】：

添加 fade={false} 至少可以为我显示模式。

【讨论】：

fade={this.state.fade} 到标签并处于状态 state={ fade: false}

【解决方案5】：

问题不是因为“react-bootstrap”包。问题是：你必须在 react-bootstrap 包中导入了 bootstrap css 和 bootstrap css 冲突。

尝试如下导入css：

import "bootstrap/dist/css/bootstrap.min.css";

代替：

import "./assets/CSS/bootstrap/dist/css/bootstrap.min.css";

由于我们无法删除“react-bootstrap”以使用模态。所以尝试删除其他css。这解决了我的问题。

【讨论】：

【解决方案6】：

对我来说，它适用于

<Modal show={true}> .... </Modal>

【讨论】：

【解决方案7】：

我想你可能想参考github上的这个问题：

https://github.com/jquense/react-bootstrap-modal/issues/35

该示例似乎无法复制和粘贴。

【讨论】：

【解决方案8】：

面对同样的问题，我不得不单独导入所有页眉、页脚和正文组件。这是我在ReactJS v17 上针对React Bootstrap Modal 的解决方案。

import Modal from 'react-bootstrap/Modal'
import ModalHeader from 'react-bootstrap/ModalHeader'
import ModalBody from 'react-bootstrap/ModalBody'
import ModalFooter from 'react-bootstrap/ModalFooter'
import Button from 'react-bootstrap/Button'

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            demoModal: true
        };
    };
    render() {
        return (
            <div>
                <Modal scrollable={true} show={this.state.demoModal} fade={false} style={{ display: "block"}}>
                    <ModalHeader toggle={this.toggle}>
                        Modal title
                    </ModalHeader>
                    <ModalBody>
                        Modal Body
                    </ModalBody>
                    <ModalFooter>
                        <Button onClick={() => this.state({demoModal: false})}>
                            Close
                        </Button>
                    </ModalFooter>
                </Modal>
            </div>
        );
    }
}

【讨论】：