React中使用Bootstrap模态框如何设置默认显示无需按钮触发

实现方案 #

你可以通过以下两种方案实现模态框默认显示，同时支持JS控制显示状态，更推荐第一种React状态驱动的方案，更符合React的开发逻辑：

方案1：React状态控制（推荐）

1. 改造Modal组件

给组件新增isOpen（显示状态）、onClose（关闭回调）两个props，根据状态控制模态框的显示和相关样式：

import { useEffect } from 'react';

export default function Modal({ isOpen, onClose }) {
  // 同步给body添加/移除模态框打开对应的类，避免页面滚动
  useEffect(() => {
    isOpen ? document.body.classList.add('modal-open') : document.body.classList.remove('modal-open');
  }, [isOpen]);

  // 状态为关闭时直接不渲染组件
  if (!isOpen) return null;

  return(
    {/* 加show、d-block类让模态框默认显示 */}
    <div className="modal show d-block" tabindex="-1" role="dialog">
      <div className="modal-dialog" role="document">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">Modal title</h5>
            <button type="button" className="close" aria-label="Close" onClick={onClose}>
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div className="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary" onClick={onClose}>Close</button>
            <button type="button" className="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
      {/* 如果需要遮罩层，加下面这行 */}
      <div className="modal-backdrop show"></div>
    </div>
  )
}

2. 改造App组件

给模态框状态设置初始值为true即可实现默认显示：

import "./styles.css";
import Modal from './Modal'
import { useState } from 'react';

export default function App() {
  // 初始值设为true，模态框默认显示
  const [isModalOpen, setIsModalOpen] = useState(true);

  return (
    <div className="App">
      <h1>123</h1>
      <Modal 
        isOpen={isModalOpen} 
        onClose={() => setIsModalOpen(false)} 
      />
      {/* 可自定义按钮控制模态框显隐 */}
      <button onClick={() => setIsModalOpen(true)} className="btn btn-primary mt-3">打开模态框</button>
    </div>
  );
}

方案2：调用Bootstrap原生JS方法

如果你已经引入了Bootstrap JS和Popper.js依赖，可以直接调用原生API在组件挂载时触发模态框显示：

import { useEffect, useRef } from 'react';

export default function Modal() {
  const modalRef = useRef(null);

  useEffect(() => {
    // 组件挂载完成后调用原生方法显示模态框
    const bootstrapModal = new window.bootstrap.Modal(modalRef.current);
    bootstrapModal.show();
  }, []);

  return(
    <div ref={modalRef} className="modal" tabindex="-1" role="dialog">
      {/* 模态框内部代码和你原有代码保持一致即可 */}
    </div>
  )
}

注意事项 #

• React中DOM的类名属性要写className，不要写原生的class，否则会触发属性警告
• 用状态控制的方案不需要保留原生data-dismiss属性，直接绑定点击事件触发关闭逻辑即可

内容的提问来源于stack exchange，提问作者CCCC