IT技术 - 如何将props传递给模态 - 吾爱随笔录

我有一个购物应用程序，我可以在其中映射一些产品并将它们呈现在屏幕上。用户可以增加/减少数量。当数量达到 1 并且用户点击次数减少时，一些中间件会跳入并询问他们是否确定要将其从篮子中删除。如果他们点击否，那么它将关闭模态并将其留在篮子中。如果他们单击是，它将关闭模态并将其从篮子中删除

如何将props传递给模态以确保删除正确的产品？

到目前为止我有这个。所有的功能都在那里，删除的能力也在那里。我只是不确定如何将特定产品传递给模态？增量/减量工作的原因是因为它们是map映射到每个产品的一部分。显然，当模态加载时，它不是地图的一部分。我已经尝试将它包含在地图中，但显然这为每个产品呈现了一个无用的模式

<h4> Bag </h4>
<Modal />
{bag.products.map((product, index) => (
  <div key={index}>
    <div>{product.name}</div>
    <div>£{product.price}</div>
    <div>
      <span> Quantity:{product.quantity} </span>
      <button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button>
      <button onClick={() => this.props.decrementQuantity(product)}> - </button>
    </div>
  </div>
))}

有任何想法吗？

//****************************************************************************/ constructor(props) { super(props) this.state = { isModalOpen: false, modalProduct: undefined, } } //****************************************************************************/ render() { return ( <h4> Bag </h4> {this.state.isModalOpen & ( <Modal modalProduct={this.state.modalProduct} closeModal={() => this.setState({ isModalOpen: false, modalProduct: undefined}) deleteProduct={ ... } /> ) {bag.products.map((product, index) => ( <div key={index}> <div>{product.name}</div> <div>£{product.price}</div> <div> <span> Quantity:{product.quantity} </span> <button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button> <button onClick={() => this.decrementQuantity(product)}> - </button> // <---- </div> </div> ))} ) } //****************************************************************************/ decrementQuantity(product) { if(product.quantity === 1) { this.setState({ isModalOpen: true, modalProduct: product }) } else { this.props.decrementQuantity(product) } }