ReactJS：是否可以动态更改我的“数据目标”属性？而不是单独设置它们？

Question

基本上，我在我的反应项目中创建一个引导表，并使用手风琴切换来包含下拉列表中的多余信息。截至目前，当我单击下拉菜单时，所有下拉菜单都会打开，因此我尝试设置数据目标属性（当前设置为

#demo1

）和 id 属性以动态更改，以便更好地控制哪些属性下拉菜单打开以及何时打开。

我正在使用 React 和 bootstrap，但我仍然很新：S

我尝试将数据目标设置为唯一的ID

{item._id}

，它与密钥相同，但没有任何反应，我想这是因为我前面没有#，但如果我添加它，它会出错到表达式的前面。

<tr
  key={item._id}
  className="accordion-toggle"
  data-toggle="collapse"
  data-target="#demo1"
>
    {...}
</tr>
<tr>
  <td colSpan="6" className="hiddenRow">
    <div className="accordion-body collapse" id="demo1">
      <table className="table table-dark">    
      </table>
    </div>
  </td>
</tr>

Answer 1

我可能会通过跟踪数组中父组件中所有下拉菜单的状态（打开与关闭）来实现此目的，并将其作为布尔属性（例如“isOpen”）传递给子组件。

如果还有更多内容，也许您可以附上您正在尝试执行的操作的屏幕截图？

Answer 2

可能不适用于旧版本的react/bootstrap，但使用bootstrap 5和react 18（可能低至16），您可以将属性包装在大括号中并连接您想要的id，例如{“#demo”+ idx}。