Question

const AccountDetails = ({ accountDetails }) => {
    const tooltipContent = (
        <ul className="account-details-content">
            {accountDetails.filter((detail) => detail && Object.keys(detail).length).map((detail) => (
                <li key={detail.title}>
                    <span>{`${detail.title}:`}</span>
                    <span>{detail.formattedValue}</span>
                </li>
            ))}
        </ul>
    );

    return (
        <Tooltip
            content={tooltipContent}
            placement="bottom"
            portalClassName="account-details-portal"
            tooltipType="popover"
            trigger="click"
        >
            <li>
                <i className="material-icons">description</i>
                <span>Details</span>
            </li>
        </Tooltip>
}

What the code does

如果formatedValue为'NA'，我需要弄清楚如何删除“ propertyManagementSoftwareOther”。基本上根本不显示它。

detail.title是图像的右侧。 detail.formattedValue是图像的左侧。

Answer 1

您无法在地图中执行条件操作，因为它会分别显示每个订单项。您需要做的是从阵列中删除不想显示的detail。一个简单的解决方案是在您的filter之前添加另一个map：

const AccountDetails = ({ accountDetails }) => {
  const tooltipContent = (
    <ul className="account-details-content">
      {accountDetails
        .filter( detail => detail && Object.keys(detail).length)
        .filter( detail => detail.title === 'propertyManagementSoftwareOther' ? detail.value !== 'NA' : true )
        .map((detail) => (
          <li key={detail.title}>
            <span>{`${detail.title}:`}</span>
            <span>{detail.formattedValue}</span>
          </li>
      ))}
    </ul>
  );

  return (
    <Tooltip
      content={tooltipContent}
      placement="bottom"
      portalClassName="account-details-portal"
      tooltipType="popover"
      trigger="click"
    >
      <li>
        <i className="material-icons">description</i>
        <span>Details</span>
      </li>
    </Tooltip>
}

在地图内添加条件

1 个答案: