【发布时间】：2020-06-07 19:54:35
【问题描述】：
一段时间以来，我一直在尝试向我的网站添加模式，但无论我尝试了多少，我遵循的示例，它都没有显示出来。我正在将 React 与 Next JS 一起使用
我试过了 this and this and this 但由于某种原因，我无法让模态出现在屏幕上。 此外，我删除并重新安装了我的 node_modules 文件夹和 yarn.lock ，但这也没有什么不同。 这是我的步骤：
- 从https://getbootstrap.com/docs/4.4/components/modal/ 的引导组件中获取示例模式代码
- 在 src/components 中创建了一个 Modal.js 文件
- 在 index.js 中引用。
结果：我看到“启动演示模式”按钮，但是当我单击时，什么也没有发生。没有错误，什么都没有。我在谷歌浏览器和野生动物园都试过了，结果是一样的。
这是我的 Modal.js 组件：
import React from "react";
const Modal = () => {
console.log("is this being called?");
return (
<div>
<button
type="button"
className="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal"
>
Launch demo modal
</button>
<div
className="modal fade"
id="exampleModal"
tabIndex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
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>
);
};
export default Modal;
我如何在 index.js 中调用它
import Modal from "../src/components/Modal";
const Index = ({ posts }) => {
return (
<Layout>
<Navigation />
<head>
....
<Modal />
.....
)
index.html 中引用的脚本
<script src="js/jquery/jquery.min.js"></script>
<script src="js/popper/popper.min.js"></script>
<!-- <script src="js/bootstrap/bootstrap.min.js"></script> -->
<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>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
和 Package.json
{
"name": "testapp",
"version": "1.0.0",
"private": true,
"engines": {
"node": "12.2.0",
"npm": "6.4.1",
"yarn": "1.13.0"
},
"dependencies": {
"@sendgrid/contact-importer": "^6.5.1",
"@sendgrid/mail": "^6.5.1",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"body-parser": "^1.19.0",
"bootstrap": "^4.4.1",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"isomorphic-unfetch": "^3.0.0",
"next": "^9.1.4",
"next-images": "^1.2.0",
"node-sass": "^4.13.1",
"raw-loader": "^4.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-ga": "^2.7.0",
"react-markdown": "^4.2.2",
"react-scripts": "3.2.0"
},
"scripts": {
"dev": "node server/index",
"build": "next build",
"start": "next start -p $PORT"
},
"eslintConfig": {
"extends": "react-app"
}
}
感谢您的帮助。
附言。
Bootstrap 样式确实有效，但模态无效。例如：
<div className="col-md-6 my-auto"> works just fine.fors 就好了。
编辑 1： 我包含到 index.html
<script src="js/jquery/jquery.min.js"></script>
<script src="js/popper/popper.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
在 index.js 中
import $ from 'jquery';
<button
type="button"
className="btn btn-primary"
onClick={() => $("#exampleModal").modal("show")}
>
<Modal />
</button>
编辑 2：
从 index.js 中删除 jquery 导入并在开发者控制台中运行 $("#exampleModal").modal("show") 我得到 modal is not a function error now
编辑 3： 所以我添加了“reactstrap”并使用了这里提到的一种模式：https://reactstrap.github.io/components/modals/ 然后在我的索引文件中，我将其添加为按钮的一部分，如下所示：
<button
className="btn btn-primary"
onClick={showConfirmationResult}
>
Submit
<ModalExample isOpen={false} toggle={true} />
</button>
然后它才起作用，但这并不理想。我想根据按钮点击触发模态，所以我尝试了这个：
const showConfirmationResult = () => {
return <ModalExample isOpen={false} toggle={true} />;
};
但这不起作用，我不知道为什么。
感谢您的帮助。
【问题讨论】：
-
您可以在这里找到答案。 stackoverflow.com/questions/52248179/…
-
这行不通，因为您直接使用引导程序，需要 jQuery 来执行操作，所以我建议您实现最后是引导程序的
reactstrap库，您可以实现模态的。链接：reactstrap.github.io/components/modals
标签： javascript reactjs next.js