Bootstrap手风琴动态表格开发：如何在HTML标签属性中实现字符串动态插值

你遇到的问题是JSX里属性值的表达式语法用错啦！在JSX中，如果你想在属性里使用JavaScript变量或者模板字符串，必须把整个表达式放在**大括号{}**里面，而不是直接把模板字符串写在引号里——普通引号里的内容会被当成纯文本，所以${index}根本不会被解析成实际的索引值，自然就生成了无效的选择器。

修正后的代码 #

把你的属性值改成用大括号包裹的模板字符串（注意模板字符串要用反引号`），就能正确插值了：

function renderTableData() {
  if(data?.tableData){
    return data.tableData.map((currentData, index) => {
      // 提取id变量，避免重复编写模板字符串，提升可维护性
      const accordionId = `main-accordion${index}`;
      return (
        <>
          <tr key={nanoid()} data-bs-toggle="collapse" data-bs-target={`#${accordionId}`}>
            <td>{currentData.someField}</td>
          </tr>
          <tr className="collapse accordion-collapse" id={accordionId}>
            {/* 这里放置你的第一级嵌套手风琴内容 */}
          </tr>
        </>
      )
    })} else{
      return null; // 建议返回null而非undefined，更符合React渲染规范
    }
}

额外的小提示 #

• 你同时写了data-toggle和data-bs-toggle，这是Bootstrap不同版本的属性，Bootstrap 5只需要保留data-bs-toggle即可，删掉旧属性避免潜在冲突。
• 虽然用nanoid()作为key是可行的，但如果你的currentData里自带唯一标识（比如id字段），用这个业务唯一值作为key会更符合React的性能优化最佳实践。

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