javascript - 使用反应为每个对象创建一个模态弹出窗口

Question

我有一张反应中的卡片列表，在每张卡片中我都有一个按钮。

单击该按钮时，应显示带有一些信息的模态弹出窗口，但我无法为每个条目创建模态，因为数据目标始终相同。

我试图通过将“#”与对象名称连接起来来更改模态框上的数据目标，但它不起作用。

这是代码：

 {this.state.groups.map((groups) => {
 return ( 
    <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#' + groups.name + '" >
      {groups.name}
    </button>

    <div className="modal fade" id={groups.name} tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" />

 )})}

标签： javascriptreactjsbootstrap-modal

Answer 1

而不是这个data-target="#' + groups.name + '"，也许你可以试试这个

data-target={`#${groups.name}`}