我得到一个错误。我添加了一些代码,并希望在我的代码中了解为什么它不起作用。我不能使用react- strap。请建议我们是否可以在反应中使用Bootstrap模式。
我得到一个错误。我添加了一些代码,并希望在我的代码中了解为什么它不起作用。我不能使用react- strap。请建议我们是否可以在反应中使用Bootstrap模式。下面是我的代码
import React from 'react'; import $ from 'jquery'; window.jQuery = $; window.$ = $; global.jQuery = $; class Modal extends React.Component { constructor(props) { super(props); } componentDidMount() { $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) } render() { return ( <div> <div className="bd-example"> //Button code <button type="button" className="btn btn-primary " data-toggle="modal" data-target="#exampleModalLive"> Launch demo modal</button> //Modal code <div className="modal" id="exampleModalLive" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div className="modal-dialog modal-dialog-centered" role="document"> <div className="modal-content"> <div className="modal-header"> <h5 className="modal-title" id="exampleModalCenterTitle">Modal title</h5> <button type="button" className="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div className="modal-body"> ... </div> <div className="modal-footer"> <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" className="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> ); } } export default Modal
您可以在文件夹中的文件中包含jquery和bootstrap使用。CDN``index.html``public
jquery
bootstrap
CDN``index.html``public
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
另外,请确保您已添加bootstrap.css文件,
bootstrap.css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
演示版