模型框无法在React js中打开

Question

import React, { useEffect, useRef } from 'react';

const Modal = () => {
  const modalRef = useRef(null);

  useEffect(() => {
    const modals = document.querySelectorAll('.modal');

    modals.forEach((modal) => {
      modal.addEventListener('show.bs.modal', () => {
        const easein = modal.getAttribute('data-easein');
        const modalDialog = modal.querySelector('.modal-dialog');

        if (easein === 'swing') {
          modalDialog.classList.add('callout', 'swing');
        } else {
          modalDialog.classList.add('transition', easein);
        }
      });
    });
  }, []);

  return (
    <>
      <a href="#customModal29" role="button" className="btn btn-default" data-toggle="modal">
        swing
      </a>

      <div
        ref={modalRef}
        id="customModal29"
        className="modal"
        data-easein="swing"
        tabIndex="-1"
        role="dialog"
        aria-labelledby="customModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-hidden="true">
                ×
              </button>
              <h4 className="modal-title">Modal Header</h4>
            </div>
            <div className="modal-body">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                mollit anim id est laborum.
              </p>
            </div>
            <div className="modal-footer">
              <button className="btn btn-default" data-dismiss="modal" aria-hidden="true">
                Close
              </button>
              <button className="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Modal;

点击swing时模型框不会出现。

Answer 1

从一开始，您就在 ReactJS 中使用本机代码，这通常不是使用 ReactJS 的最佳实践。

使用ReactJS来管理和简化代码的好处是它是可以控制的。

我建议你使用像 [Modal] 1 这样的组件，以便能够通过反应状态来管理你的组件，这在你的场景中很有用。