在 React 的 ListItem 中显示 Material UI

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(", ") }

在 React 的 ListItem 中显示 Material UI

Displaying in ListItem in React Material UI

reactjs

material-ui

react-material