时间戳

首页 > 解决方案 > 循环 div 并将其作为单独的组件和循环有什么区别？

javascript - 循环 div 并将其作为单独的组件和循环有什么区别？

问题描述

我需要知道这段代码有什么区别

     {this.state.products &&
                    this.state.products.map((product, index) => (
                      <div key={index}>
                        <Subd
                          name={product.name}
                          price={product.price}
                          info={product.info}
                          image={product.image}
                          handleShow={this.showProduct}
                          handleTotal={this.calculateTotal}
                        />
                      </div>
                    ))}

并在组件内部循环div，<Sudb/>例如

this.state.products &&
        this.state.products.map((product, index) => (
      <div className="row form-group">
      <div className="col-sm-2">
        <img
          className="card-img-right flex-auto d-none d-lg-block"
          alt="Thumbnail+{index}"
          src={product.image}
        />
      </div>
      <div className="col-sm-6">
        <h4>
          {product.name}: ${product.price}
        </h4>
        <button className="btn btn-outline-primary" onClick={this.showInfo}>
          show info
        </button>
      </div>
      <div className="col-sm-4 text-right">
        qty: {this.state.qty}
        <br />
        <button className="btn btn-outline-primary" onClick={this.add}>
          {" "}
          +1{" "}
        </button>
        <button
          className="btn btn-outline-primary"
          onClick={this.subtract}
          disabled={this.state.qty < 1}
        >
          {" "}
          -1{" "}
        </button>
      </div>
    </div>`

在上述情况下，如果我更新影响所有三个对象的数量，但在第一种情况下它工作正常。谁能解释两者之间的确切区别是什么？沙盒链接沙盒

在第二个代码中我<Subd/>直接制作了组件代码

标签： javascriptreactjs

解决方案

从我在提供的第二个示例提供的代码示例中可以看到的问题如下。

您对所有产品使用相同的状态。因此，当您为一行更新 this.state.qty 时，它会同时更新所有这些。

当你分开它时它确实起作用的原因是因为每一行都有自己的状态，你可以在其中存储单独的数量。

如果您确实觉得不需要分离该代码，您可以为每个数量创建一个状态数组。并更改减法以接受一个索引，该索引可用于访问 qty 状态数组上的特定行 qty 状态。

要将参数传递给 onclick，您必须将其包装在箭头函数中，这样当页面像这样安装时它不会自动运行

onClick={() => {someFunction(param)}

推荐阅读