Bootstrap Modal 在 React Component 中呈现但不可见

Question

我正在制作我的第一个 bootstrap 模态反应，但我正在努力解决它。我将以下组件导入到我的应用程序的导航栏中。当我单击下面组件中的锚标记时，它将切换模式的 html 元素在 DOM 中呈现。但是这些元素是不可见的。

我正在尝试使用常规 bootstrap 而不是 react-strap，因为我对 React-strap 的经验有限并且我试图避免学习新包。这在 React 中使用常规 bootstrap 可行吗？

到目前为止，我已经尝试了一些修复，其中之一是在我的渲染函数中删除三元运算符，然后将 data-toggle 和 data-target 属性添加到我的定位标记。但是，这对我不起作用。

import React, { Component } from 'react'

export default class RegisterModal extends Component {
    
    state={
        modal: false
    }

    toggle = (e) => {
        e.preventDefault();
        this.setState(
            {modal: !this.state.modal}
        )
    }

    render() {
        return (
            <div>
                <a href='' className="nav-link" onClick={this.toggle} >Register</a>

                { this.state.toggle? <div id="registerModal" className="modal" tabindex="-1" role="dialog">
                        <div className="modal-dailog" role = "document">
                            <div className="modal-content">
                                <div className="modal-header">
                                    <h5 className="modal-title">Register</h5>
                                    <button className="close" type='button' data-dismiss="modal" aria-label='Close'>
                                        <span aria-hidden='true'>&times;</span>
                                    </button>
                                </div>
                                <div className="modal-body">
                                    <p>filler text</p>
                                </div>
                            </div>
                        </div>
                    </div> : null}

            </div>
        )
    }
}

编辑：我还应该注意，我通过将 bootstrap 导入我的 index.js 文件来引入它。有没有什么方法可以让我通过此设置导入 bootstrap 的 Jquery 方面？

import App from './App';

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

import './App.css';
import reportWebVitals from './reportWebVitals';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

Bootstrap 单独使用 DOM 来显示或隐藏对话框，因此为了使其工作，它必须 link 在 button 或 [=13 之间=] 和对话目标。您正在使用 React 状态 display/hide，这可能不会产生预期的结果。下面是有效的代码

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

在这种情况下 button/link 之间 link 的重要属性是 data-target 而不是 React 状态。您仍然可以将事件侦听器添加到按钮。

请注意，这可能会解决您的问题，但将来会尝试使用 react-bootstrap 或 reactstrap 来避免此问题，因为它将 React 状态管理与 bootstrap 集成在一起这将在以后对您有很大帮助。它们与 Boostrap 本身也没有太大区别。供您参考，这是您使用 react-bootstrap

编写的代码的样子

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Bootstrap Modal 在 React Component 中呈现但不可见

Bootstrap Modal renders in React Component but is not visible

twitter-bootstrap

bootstrap-modal

reactjs