nextjs 和 bootstrap5 模态答案

【问题标题】：nextjs and bootstrap5 modalnextjs 和 bootstrap5 模态
【发布时间】：2022-04-19 18:29:22
【问题描述】：

您好，我想在创建模态时使用不带 react-bootstrap 和 reactstrap 的 bootstrap 5，但最终出现此错误：

TypeError: undefined is not an object (evalating 'this._element.classList')

您有什么想法吗，因为我正在查看的所有示例仍然使用 reactstrap 或 react-bootstrap，您是否知道如何做到这一点，谢谢您的帮助。

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
          <div id="modal-root"></div>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

我的模态

import { useState, useEffect } from "react";
import ReactDom from "react-dom";

const Modal = ({ show, onClose, children, title, targetModal }) => {
  const [isBrowser, setIsBrowser] = useState(false);
  useEffect(() => setIsBrowser(true));

  const handleCloseModal = (e) => {
    e.preventDefault();
    let myModalEl = document.getElementById(targetModal);

    console.log(myModalEl);
    onClose();
  };

  const modalContent = show ? (
    <div
      className="modal fade py-3"
      tabIndex="-1"
      role="dialog"
      id={targetModal}
    >
      <div className="modal-dialog" role="document">
        <div className="modal-content border-0 rounded-6 shadow-blue-sm">
          <div className="modal-header p-4 pb-4 border-bottom-0">
            <h4 className="fw-bold mb-0 hstack text-secondary">
              {title && (
                <span>
                  <i className="ri-user-search-line me-2"></i> {title}
                </span>
              )}
            </h4>
            <button
              type="button"
              className="btn-close"
              data-bs-dismiss="modal"
              onClick={handleCloseModal}
              aria-label="Close"
            ></button>
          </div>

          <div className="modal-body p-4 pt-0">{children}</div>
        </div>
      </div>
    </div>
  ) : null;

  if (isBrowser) {
    return ReactDom.createPortal(
      modalContent,
      document.getElementById("modal-root")
    );
  } else {
    return null;
  }
};

export default Modal;

我的页面

import { useState } from "react";

import Layouts from "@/components/Layouts";
import Modal from "@/components/Modal";

const EditEventsPage = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <Layouts title="Edit event.">
      <button
        type="submit"
        className="btn btn-secondary mt-4 hstack"
        data-bs-toggle="modal"
        data-bs-target="#uploadImage"
        onClick={() => setShowModal(true)}
      >
        <i className="ri-image-line "></i> Ajouter image{" "}
      </button>
      <Modal
        show={showModal}
        onClose={() => setShowModal(false)}
        targetModal="uploadImage"
      ></Modal>
    </Layouts>
  );
};

export default EditEventsPage;

感谢您的帮助。

【问题讨论】：

标签： reactjs next.js bootstrap-5

【解决方案1】：

我无法使用你的方法实现这一点。

但是，这对我有用，您可以扩展该示例。

在你的 _app.js 文件中添加这行代码，你应该把它包装在 useEffect 函数中

useEffect(() => {
typeof document !== undefined
  ? require("bootstrap/dist/js/bootstrap")
  : null;
},[]);

这将使引导程序在您的项目中可用。所以无论你想在哪里触发你的模态。

只需这样做

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

你的引导模式

<div
      className="modal modal-alert bg-secondary py-5"
      tabIndex="-1"
      role="dialog"
      id="myModal"
    >
      <div className="modal-dialog modal-dialog-centered" role="document">
        <div className="modal-content rounded-4 shadow">
          <div className="modal-body p-4 text-center">
            <h5 className="mb-0">Enable this setting?</h5>
            <p className="mb-0">
              You can always change your mind in your account settings.
            </p>
          </div>
          <div className="modal-footer flex-nowrap p-0">
            <button
              type="button"
              className="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-right"
            >
              <strong>Yes, enable</strong>
            </button>
            <button
              type="button"
              className="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0"
              data-bs-dismiss="modal"
            >
              No thanks
            </button>
          </div>
        </div>
      </div>
    </div>

希望这会有所帮助。

【讨论】：