仅显示 React 中的现有元素

Question

有一个像这样的布尔值列表：

const a = true;
const b = true;
const c = false;
const d = true;

有一个组件有一个标签和一个值。标签将是列表的名称（始终相同），值将是上面真实元素的列表。

像这样：

Label   value a
        value b
        value d

如果它们都不为真，则不应打印任何内容。

这是组件：

const CustomListItem = ({ label, value }) => {
  return value ? (
    <ListItem>
      <span className="label-bold">{label}</span>
      <span className="tile__body-value">{value}</span>
    </ListItem>
  ) : null;
};

问题是我不知道如何打印列表中的那些元素。到目前为止，这是我的方法：

      {(a ||
        b ||
        c ||
        d) && (
        <CustomListItem
          label={intl.formatMessage({ id: 'myLabel' })}
          value={
            a && <>{intl.formatMessage({ id: 'a' })}<br /><>,
            b && <>{intl.formatMessage({ id: 'b' })}<br /><>,
            c && <>{intl.formatMessage({ id: 'c' })}<br /><>,
            d && <>{intl.formatMessage({ id: 'd' })}<br /><>
          }
        />
      )}

我得到错误：

Unexpected token. Did you mean `{'>'}` or `>`?ts(1382)

我没有使用 Typescript，我使用的是带有 Javascript 的 React。 intl.formatMessage 用于将 a、b、c 或 d 的值翻译成用户的语言。

知道如何解决这个问题吗？

更新

我修正了结束标签中的错字，现在是这样的：

    <CustomListItem
      label={intl.formatMessage({ id: 'oligoShippingOptions' })}
      value={
        (a && (
          <>
            {intl.formatMessage({ id: 'a' })}
            <br />
          </>
        ),
        b && (
          <>
            {intl.formatMessage({ id: 'b' })}
            <br />
          </>
        ),
        c && (
          <>
            {intl.formatMessage({ id: 'c' })}
            <br />
          </>
        ),
        d && (
          <>
            {intl.formatMessage({ id: 'd' })}
            <br />
          </>
        )
     }
  />

它只打印列表中的最后一个真值，在这种情况下，d，为什么不打印所有这些真值？

Answer 1

这可能是你所期望的！

<CustomListItem
  label={intl.formatMessage({ id: 'oligoShippingOptions' })}
  value={(
    <>
      {a && (
        <>
          {intl.formatMessage({ id: 'a' })}
          <br />
        </>
      )}
      {b && (
        <>
          {intl.formatMessage({ id: 'b' })}
          <br />
        </>
      )}
      {c && (
        <>
          {intl.formatMessage({ id: 'c' })}
          <br />
        </>
      )}
      {d && (
        <>
          {intl.formatMessage({ id: 'd' })}
          <br />
        </>
      )}
    </>
  )}
/>