时间戳

首页 > 解决方案 > 如何以更短的方式赋予多个属性以响应组件？

reactjs - 如何以更短的方式赋予多个属性以响应组件？

问题描述

<ReactComponent
      closeModal={this.infoModalToggle}
      customerFirstName={selectedObj.firstName}
      customerLastName={selectedObj.lastName} 
      indicatorNum={selectedObj.indicator}
      customerPhone={selectedObj.customerPhoneNumber}
      pickupTime={formatPickupTime}
      orderNum={selectedObj.orderNumber}
      numOfTotes={selectedObj.totes}
      numOfRefrigerated={selectedObj.refrigerated}
      numOfAmbient={selectedObj.ambient}
      numOfFrozen={selectedObj.frozen}
    />

在此代码片段中，反应组件具有多个属性。我的问题是如何以更好的方式而不是这种方式传递属性。是否有可能使用 {...} 或任何其他方式传递所有属性。以及它将如何破坏组件。

谢谢

标签： reactjs

解决方案

是的，您可以使用解构来传递大量道具，但请注意它们将使用与您正在解构的对象中完全相同的名称传递。

例如，您可以选择：

<ReactComponent
  closeModal={this.infoModalToggle}
  { ...selectedObj }
/>

但是您的道具名称会从 更改customerFirstName为firstName例如。

如果你认为你可以处理这个，它会更短。

您甚至可以通过以下方式直接传递对象：

<ReactComponent
  closeModal={this.infoModalToggle}
  selected={ selectedObj }
/>

它更快，但您仍然更改了道具名称。

推荐阅读