我有一个反应中的卡片列表,每张卡片中都有一个按钮。
当单击该按钮时,应该显示一个模态弹出窗口,其中包含一些信息,但是由于数据目标始终相同,所以我无法为每个条目创建一个模态。
我试图通过将“#”与对象名称连接起来来更改模态上的数据目标,但这不起作用。
代码如下:
{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" />
)})}
答案 0 :(得分:1)
代替这个data-target="#' + groups.name + '"
,也许您可以尝试
data-target={`#${groups.name}`}