Javascript 仅显示React中的现有元素

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

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

    <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 />
          </>
        )
     }
  />

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

像这样：

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;
};

我没有使用Typescript，而是使用React with Javascript

intl.formatMessage

用于将a、b、c或d的值转换为用户的语言

你知道怎么解决这个问题吗

更新

我修复了结束标记中的输入错误，现在是这样的：

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

    <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

，为什么不打印所有这些真值？

这可能就是您所期望的

<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 />
        </>
      )}
    </>
  )}
/>

我认为您没有正确关闭，应该是：a&&{intl.formatMessage（{id:'a'}）}
（到处更改）@NeERAJTK我修复了那个打字错误，但它仍然不起作用，我更新了问题。我修复了那个打字错误，但它仍然不起作用，我更新了问题。