我需要动态创建一个表，此表有三个折叠级别（展开线），因此我需要为每个<tr>标记分配一个id，以便 Bootstrap 的折叠功能正常工作。
我可以有无限多个<tr>，所以我想用下面的方法创建我的<tr>：

• 我用.map读取收到的数据
• 对于每个读取的数据，我在map函数中获取当前索引
• 在我的html标签<tr>中，我用一个已知的字符串创建了我的id，并通过插值将索引添加到该字符串中。

为此，我编写了以下代码：此函数的返回通过创建<tbody>的<tr>来完成已创建的表

function renderTableData() {
        if(data?.tableData){
            return data.tableData.map((currentData, index) => {
                return (
                    <>
                        <tr key={nanoid()} data-toggle="collapse" data-bs-toggle="collapse" data-bs-target="#main-accordion${index}">
                            <td>{currentData.someField}</td>
                        </tr>
                        <tr className="collapse accordion-collapse" id="main-accordion${index}">
                            //Another <tr> which will contain my first nested accordion
                        </tr>
                    </>
                )
        })} else{return undefined}
    }

正如您在上面的代码中看到的，我尝试以以下方式创建我的id：tag-property="#name_id${index}"
但插值未完成，创建的字符串为：“#主折叠式${index}”
这会产生以下错误：

Failed to execute 'querySelector' on 'Document':
'#main-accordion${index}' is not a valid selector.

有没有人知道如何在html标签的属性中进行这种类型的插值？我真的不知道怎么做，任何帮助都是很好的