在 React Material UI 中的 ListItem 中显示

Question

在我的 ListItemText 辅助文件中显示多个有条件的文本时遇到问题。如果满足该条件，它应该显示几个特定的​​国家。现在的问题是它没有显示

这是我的代码

<ListItemText
  primary="Place(s) you been to"
  secondary={
    (`${formData?.Italy ? "You can go Italy " : ""}`,
    `${formData?.France ? "Hello France " : ""}`,
    `${formData?.Portugal ? "Welcome to Portugal " : ""}`,
    `${formData?.Spain ? "Hi Spain" : ""}`)
  }
/>;

如果我这样做，它会起作用

secondary={formData?.Italy ? "You can go to Italy " : ""}

Answer 1

如果只显示一个特定的国家，你应该使用三元运算符链接

secondary={ `${
  formData?.Italy
    ? "Italy "
    : formData?.France
    ? "France "
    : formData?.Portugal
    ? "Portugal"
    : formData?.Spain
    ? "Spain"
    : ""
}` }

多个

secondary={ `${["Italy", "France", "Portugal", "Spain"]
  .filter((country) => formData?.[country])
  .join(", ")}`
}

问题更改后更新

secondary={
    `${formData?.Italy ? "You can go Italy " : ""}`+
    `${formData?.France ? "Hello France " : ""}`+
    `${formData?.Portugal ? "Welcome to Portugal " : ""}`+
    `${formData?.Spain ? "Hi Spain" : ""}`
  }

如果你想在每个之间用逗号

secondary={ [
  `${formData?.Italy ? "You can go Italy" : ""}`,
  `${formData?.France ? "Hello France" : ""}`,
  `${formData?.Portugal ? "Welcome to Portugal" : ""}`,
  `${formData?.Spain ? "Hi Spain" : ""}`,
].filter(Boolean).join(", ") }