Javascript 基于引导的模式未出现在React/Next JS应用程序中

我已经尝试在我的网站上添加一个模式有一段时间了，但无论我怎么尝试，我遵循的例子，它都没有出现。我正在使用React with Next JS

我试过了 但由于某些原因，我无法使模态显示在屏幕上。 此外，我删除并重新安装了node_modules文件夹和warn.lock，但这也没什么区别。 以下是我的步骤：

从中的引导组件获取了一个示例模式代码

在src/components中创建了Modal.js文件

在index.js中引用了它

结果：我看到了“启动演示模式”按钮，但当我单击时，什么也没有发生。没有错误，什么都没有。我试过谷歌浏览器和safari，结果是一样的。

以下是我的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">&times;</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;

谢谢你的帮助

附言。 引导样式只起作用，模态不起作用。例如：

工作正常。

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> -->
    <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"
    />

        <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>

import$from'jquery'；
$（“#exampleModal”）.modal（“show”）}
>

然后我得到以下错误：

编辑2：

从index.js中删除了jquery导入，并在开发人员控制台中运行了$（“#examplemodel”）.modal（“show”），我得到的modal现在不是函数错误

编辑3： 所以我添加了“reactstrap”并使用了这里提到的情态动词之一： 然后在我的索引文件中，我将其作为按钮的一部分添加，如下所示：

   <button
    className="btn btn-primary"
    onClick={showConfirmationResult}
    >
    Submit
    <ModalExample isOpen={false} toggle={true} />
    </button>

提交

直到那时它才起作用，但这并不理想。我想基于按钮点击触发模式，因此我尝试了以下方法：

 const showConfirmationResult = () => {
    return <ModalExample isOpen={false} toggle={true} />;
  };

const showConfirmationResult=（）=>{
返回；
};

但这不起作用，我不知道为什么

---

感谢您的帮助。

数据目标

和

数据切换

基于触发模式的方法无法工作，因为您的dom是由react动态创建的。这意味着您的引导javascript甚至在react呈现该按钮之前就已经完成了运行。因此，您应该使用javascript方法触发它

把你的按钮换成这样

  <button
    type="button"
    className="btn btn-primary"
    onClick={()=> $('#exampleModal').modal('show')}
  >
    Launch demo modal
  </button>

$（'examplemodel'）.model（'show'）}
>
启动演示模式

您可以在这里找到答案。这将不起作用，因为您直接使用引导，这需要jQuery来执行操作，因此我建议您实现

reactstrap

库，该库最后是引导，您可以从中实现模式。Link:Hi@ssk，我尝试了你的建议，但似乎我遗漏了什么。我最初得到“$IsUndefined”的静态编译器错误，然后我将jquery添加到代码库中。第二个错误是：“TypeError:jquery\uu WEBPACK\u IMPORTED\u MODULE\u 9\uuuu\u default（…）（…）。modal不是一个函数，单击“了解为什么会发生这种情况吗？我看到您已经在index.html中包含了jquery和bootstrap。你确定你已经按照引导框架的要求包含了jquery引导和popper吗如果您已经在脚本标记中包含jquery。避免这种情况，在开发人员工具控制台中尝试

$（“#exampleModal”）.modal（“show”）

。@Maniraj Murugan我尝试了

reactstrap

，取得了半成功，但仍然不起作用

 const showConfirmationResult = () => {
    return <ModalExample isOpen={false} toggle={true} />;
  };

  <button
    type="button"
    className="btn btn-primary"
    onClick={()=> $('#exampleModal').modal('show')}
  >
    Launch demo modal
  </button>