通过Props传递data-target实现Bootstrap多模态框切换失败问题

嘿，我看到你在React里用Bootstrap原生模态框时遇到了第二个打不开的问题，这确实是个挺常见的坑，我帮你梳理几个关键的排查点和解决方案：

1. 先揪出明显的拼写错误 #

从你贴的代码片段里看到data-target={props.dataTarge...，这里明显少了一个t，应该是dataTarget（对应你Props里的props.dataTargetID）。这个拼写错误会直接导致按钮找不到对应的模态框，很大概率是第二个模态框打不开的首要原因！

2. 确保id和data-target严格对应（别忘加#！） #

你提到的写法data-target={props.dataTargetID} id={props.dataTarget}，这里一定要注意两个关键点：

• 按钮的data-target必须以#开头，后面跟模态框的id值，比如模态框id="modalTwo"，按钮的data-target就要是#modalTwo
• 两个值必须完全一致，包括大小写，不能有任何拼写差异

给你个正确的组件使用示例：

// 调用两个模态框组件
<OEModal dataTargetID="#modalOne" dataTarget="modalOne" buttonText="打开第一个模态框" />
<OEModal dataTargetID="#modalTwo" dataTarget="modalTwo" buttonText="打开第二个模态框" />

// 完整的模态框组件代码
const OEModal = (props) => {
  return (
    <div className="d-inline">
      {/* 触发按钮 */}
      <button 
        type="button" 
        className="btn btn-light btn-sm mt-2" 
        data-toggle="modal" 
        data-target={props.dataTargetID}
      >
        {props.buttonText}
      </button>

      {/* 模态框主体 */}
      <div 
        className="modal fade" 
        id={props.dataTarget}
        tabIndex="-1" 
        role="dialog" 
        aria-labelledby={`${props.dataTarget}Label`} 
        aria-hidden="true"
      >
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id={`${props.dataTarget}Label`}>
                {props.modalTitle || "模态框"}
              </h5>
              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              {/* 自定义模态框内容 */}
              {props.children}
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

3. React中用原生Bootstrap的注意事项 #

原生Bootstrap的模态框依赖jQuery和Bootstrap的JS文件，在React项目里直接用的话，可能会因为DOM渲染时机的问题导致模态框没被正确初始化。如果上面的修正后还是不行，可以试试在组件挂载后手动初始化：

import { useEffect } from 'react';

const OEModal = (props) => {
  useEffect(() => {
    // 确保DOM渲染完成后初始化模态框
    const modalEl = document.getElementById(props.dataTarget);
    if (modalEl) {
      // Bootstrap 5用这个
      new bootstrap.Modal(modalEl);
      // Bootstrap 4的话用jQuery：$(modalEl).modal();
    }
  }, [props.dataTarget]);

  // 其余组件代码和上面一样...
};

另外，更推荐的方式是用react-bootstrap库，它是Bootstrap的React官方封装，完全不需要依赖jQuery，能更好地和React的状态、生命周期配合，从根源上避免这类DOM操作的问题。

4. 检查id是否唯一 #

最后要确认两个模态框的id是完全唯一的，不能重复，否则浏览器只会识别第一个，第二个自然无法被找到。

按照上面的步骤排查一遍，应该就能解决第二个模态框打不开的问题啦！

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