时间戳

首页 > 解决方案 > React 组件：需要格式化来自 API 响应的地址并将其传递给具有复制到剪贴板功能的组件

javascript - React 组件：需要格式化来自 API 响应的地址并将其传递给具有复制到剪贴板功能的组件

问题描述

我有一个反应组件，它显示一个地址，旁边有一个复制到剪贴板图标。

返回的地址有 5 个元素：address1、address2、city、state 和 zip

当我在前端显示元素时，我可以根据它们是否存在有条件地渲染它们。但是我不确定如何将它传递给我的 CopyButton。

我开始编写格式化程序，但在传递格式化地址时遇到了问题。

这是我当前的格式化程序代码以及显示的字符串和 CopyButton 组件以供参考：

Formatter

    const formatAddress = (addressLine1: string, addressLine2: string, city: string, state: string, zip5: string ) => {
        let formattedAddress = ''
        address2 ? formattedAddress = `${addressLine1} ${addressLine2}, ${city}, ${state} ${zip5}` : formattedAddress = `${addressLine1}, ${city}, ${state} ${zip5}`
        return formattedAddress
    }

<p> element with address and CopyButton

 {address1
    ? (
        <p data-testid="address">
           {address1}
           {address2 && `, ${address2}`}
           {city && `, ${city}`}
           {state && `, ${state}`}
           {zip && ` ${zip.substring(0, 5)}`}
           {formatAddress(address1, address2, city, state, zip)}
           <ButtonCopyText
              a11yText="Copy Address"
              textToCopy={formattedAddress}
           />
        </p>
      ) : (
           <p data-testid="no-address">--</p>
      )
  }

标签： javascriptreactjstypescript

解决方案

        let formattedAddress = ''
        address2 ? formattedAddress = `${addressLine1} ${addressLine2}, ${city}, ${state} ${zip5}` : formattedAddress = `${addressLine1}, ${city}, ${state} ${zip5}`

可能是这个

const formattedAddress =
  `${addressLine1}${addressLine2 ? ` ${addressLine2}` : ''}, ${city}, ${state} ${zip5}`.trim();

此外，您永远不会定义formattedAddress何时将其用作传递给<ButtonCopyText />组件的道具。你可以在 prop 赋值中调用函数，或者将函数的返回值赋值给 JSX 之外的某个变量。

推荐阅读