javascript - 干燥/重构 ReactJs 中的组件

Question

我有一个冗长的组件，它传递了许多 Prop 。有没有更干燥的方式将该组件传递给 child ？

谢谢。

let products;
if (!this.state.loading) {
  products = this.state.products.map(product => (
    <Product
      description={product.description}
      title={product.title}
      originalRetailPrice={product.original_retail_price.formatted_value}
      retailPrice={product.retail_price.formatted_value}
      priceValue={product.retail_price.value}
      discounted={product.discount}
      imageURL={product.cover_image_url}
      key={product.uuid}
      uuid={product.uuid}
      onClick={this.addToBagHandler}
    />
  ));
}

这些是从 API 调用返回的属性。

Answer 1

您只需传递整个产品即可

let products;
if (!this.state.loading) {
  products = this.state.products.map(product => (
    <Product
      product={product}
      onClick={this.addToBagHandler}
    />
  ));
}

在 Product 中，您可以像这样访问它们:

const { description, title, discount } = this.props.product