为了更清楚，基本上我想做的就像亚马逊一样
将有一堆产品，一旦您单击产品，弹出模式中只会显示该产品及其详细信息。
在我的例子中，我已经在一个数组中存储了 3 个数据，我已经将它映射出来创建了 3div 和 3Modal Popup，每个都有按钮。
单击 1st div 的按钮后，我希望仅为第一个 div 打开模态。
但是现在当我点击所有 3 模态弹出按钮时。
我是 React 的新手，我可以在 JQuery 和 Javascript 中做同样的事情，但我无法在 React 中实现这一点。
或者有更好的方法吗？就像而不是循环和创建 3modal popup 我们可以只创建一个 modal popup，这将显示正在单击的按钮的特定 div 的数据吗？
我当前的代码：
App.js ，我在哪里创建了数组
Product.Js 它被映射到 3div 并且还有模态弹出窗口
如果你们需要更多细节，请告诉我
感谢你们。
3 使用数组中的数据动态创建的 Div
但是当我单击任何按钮时，所有 div 的弹出窗口都会弹出，这就是问题所在
当然，所有模态都会同时弹出。所有模态都使用完全相同的状态，即this.state.showModal. 一旦它得到true那么一切都会弹出。如果你仍然喜欢有 3 个这样的模态。我建议您将showModalstate的值设为JSON 值。也许是这样的：
state = {
showModal: {}
}
然后对于getModal()功能：
getModal = value => {//still using variable from `data.id`
let key_to_update = {};
key_to_update[value] = true;
this.setState( {
showModal: Object.assign( {}, this.state.showModal, key_to_update )
} );
}
然后<Modal/>应该看起来像这样：
<Modal show={this.state.showModal[data.id]} onClick={()=> this.hideModal(data.id)}/>
要隐藏模式，您可以执行以下相反的getModal()操作：
hideModal = value => {//still using variable from `data.id`
let key_to_update = {};
key_to_update[value] = false;//Just different on this
this.setState( {
showModal: Object.assign( {}, this.state.showModal, key_to_update )
} );
}
如果您仍然感兴趣并且在实现它时遇到问题，我可以帮助您创建一个工作演示。因为我不是真正测试代码，只是根据我的经验和快速分析来制作它。但是，就我个人而言，我喜欢为这种情况使用单个 Modal。只需设置“产品详细信息”的单个“状态”，然后从单个 Modal 中读取该“状态”，然后同时显示它。
==== 演示：多模态元素技术 =====
就像您的评论一样，因为您一次只需要显示一个模态，那么它会容易得多。我们不需要像上面那样有多个真/假条件。我们可以像下面这样data.id对showModal状态进行真/假检查：
class Product extends Component {
state = {
showModal: 0
};
getModal = value => {
this.setState({ showModal: value });
};
hideModal = value => {
this.setState({ showModal: 0 });
};
render() {
return (
<div className="container">
{this.props.data.map((data, key) => (
<div key={key} className="small">
<p>Namsse: {data.name}</p>
<button onClick={() => this.getModal(data.id)}>Popup</button>
<Modal
show={this.state.showModal === data.id}
onHide={() => this.hideModal(data.id)}
name={data.name}
/>
</div>
))}
</div>
);
}
}
工作演示：https : //codesandbox.io/s/pkjvy72mw0
===演示：单模态元素技术===
您也可以只有一个<Modal/>元素，如下所示：
class Product extends Component {
state = {
showModal: false,
dataModal: {
name: ""
}
};
getModal = data => {
this.setState({ showModal: true, dataModal: data });
};
hideModal = () => {
this.setState({ showModal: false });
};
render() {
return (
<div className="container">
{this.props.data.map((data, key) => (
<div key={key} className="small">
<p>Namsse: {data.name}</p>
<button onClick={() => this.getModal(data)}>Popup</button>
</div>
))}
<Modal
show={this.state.showModal}
onHide={this.hideModal}
name={this.state.dataModal.name}
/>
</div>
);
}
}