React中使用Bootstrap，如何通过data-target定位组件自身实例？

嘿，这两个问题的核心思路其实是相通的——都是要给每个组件实例的目标元素分配唯一标识，避免全局选择带来的冲突。下面分开给你讲具体怎么做：

最稳妥的方式是给当前组件实例内的目标元素生成一个唯一ID，然后让data-target通过这个ID精准指向它。这里分两种场景推荐方案：

• React 18及以上版本：直接用React内置的useId()钩子，它会生成一个稳定且唯一的ID，完美适配这种场景，还能避免服务端渲染的 hydration 问题：

import { useId } from 'react';

function MyComponent() {
  // 给当前实例生成唯一ID
  const targetId = useId();
  
  return (
    <div>
      {/* data-target用#拼接唯一ID，指向当前实例的目标元素 */}
      <button data-target={`#${targetId}`}>触发当前实例的元素</button>
      {/* 给目标元素绑定这个唯一ID */}
      <div id={targetId} className="content">我是当前实例专属的目标内容</div>
    </div>
  );
}

• React 18以下版本：可以自己生成唯一ID，比如结合useState生成随机字符串（如果是列表渲染，也可以直接用组件的key）：

import { useState } from 'react';

function MyComponent() {
  // 初始化时生成唯一ID，确保组件生命周期内不会变化
  const [targetId] = useState(() => `my-target-${Math.random().toString(36).slice(2)}`);
  
  return (
    <div>
      <button data-target={`#${targetId}`}>触发当前实例的元素</button>
      <div id={targetId} className="content">我是当前实例专属的目标内容</div>
    </div>
  );
}

答案就是把全局的类选择器.foo换成每个实例独有的唯一ID！类选择器是全局生效的，所以会选中所有实例的.foo元素，而唯一ID是每个实例独有的，就能精准定位当前实例内的目标。

给你举个Bootstrap折叠组件的完整例子，直观感受下：

import { useId } from 'react';

function CollapsibleCard() {
  const collapseId = useId();
  
  return (
    <div className="card mb-3">
      <button 
        className="btn btn-primary"
        data-bs-toggle="collapse"
        // 指向当前实例的唯一ID
        data-bs-target={`#${collapseId}`}
        aria-expanded="false"
        aria-controls={collapseId}
      >
        展开当前卡片的内容
      </button>
      {/* 绑定唯一ID，同时保留foo类做样式 */}
      <div id={collapseId} className="collapse foo">
        <div className="card-body">
          这是当前卡片独有的折叠内容，其他卡片的按钮点不到这里~
        </div>
      </div>
    </div>
  );
}

// 渲染多个实例，互相不会干扰
function App() {
  return (
    <div className="container mt-4">
      <CollapsibleCard />
      <CollapsibleCard />
      <CollapsibleCard />
    </div>
  );
}

如果你不想用ID，也可以通过React的useRef手动获取目标元素，然后在事件里手动触发Bootstrap的逻辑，但这种方式比用ID麻烦，还是推荐上面的唯一ID方案，更贴合Bootstrap的原生用法。

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