使用React和Bootstrap时，模态框仅获取首个传入属性的问题排查

原因 #

你遇到的问题核心是所有Offcanvas组件的ID与触发按钮的目标选择器重复。Bootstrap的Offcanvas是通过id和data-bs-target（或JavaScript中的目标配置）建立关联的，当多个Offcanvas使用同一个ID，或者所有触发按钮的data-bs-target都指向同一个ID时，点击任何按钮都会匹配到DOM中第一个符合该ID的Offcanvas，因此只会显示首个元素的属性。

修复步骤 #

1. 为每个Offcanvas生成唯一ID：
   在循环渲染时，利用数组的索引（或元素的唯一标识，比如item.id）为每个Offcanvas拼接唯一ID。以React为例：

   {items.map((item, index) => (
     <>
       {/* 触发按钮 */}
       <button 
         className="btn btn-primary" 
         data-bs-toggle="offcanvas" 
         data-bs-target={`#offcanvas-${index}`}
       >
         打开{item.name}的模态框
       </button>
   
       {/* Offcanvas组件 */}
       <div 
         className="offcanvas offcanvas-end" 
         tabindex="-1" 
         id={`offcanvas-${index}`} 
         aria-labelledby={`offcanvasLabel-${index}`}
       >
         <div className="offcanvas-header">
           <h5 className="offcanvas-title" id={`offcanvasLabel-${index}`}>{item.name}</h5>
           <button type="button" className="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
         <div className="offcanvas-body">
           {item.description}
         </div>
       </div>
     </>
   ))}
   

2. 确保关联关系唯一：
   触发按钮的data-bs-target必须与对应Offcanvas的id完全匹配，同时Offcanvas的aria-labelledby也要对应唯一的标题ID，保证组件的无障碍性。

3. 验证DOM结构：
   渲染完成后打开浏览器开发者工具的Elements面板，确认每个Offcanvas的id都是唯一的，且触发按钮的data-bs-target指向正确的ID。

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