Javascript CardHeader元素副标题中的换行符（MaterialUI/ReactJS）

我用的是很旧的材料。0.20.1部件

下面是我的一段代码：

return(
  <>
    <Card>
      <CardHeader 
      actAsExpander={true}
      showExpandableButton={true}
      title = {user.name} 
      subtitle={`${user.email}, ${user.phone}, ${user.isproved ? "Yes" : "No"}, Friends: ${user.friends? user.friends : "None"}`} 
      />
    </Card>)

---

因此，我有一个字幕字符串，其中包含一组变量，我想使用换行符进行可视化分隔，但添加\n甚至“…字符串”+“字符串…”都不起作用。我该怎么办？

我不能在沙箱中进行测试，但如果我们查看Material ui的0.20.1版文档，我们可以看到：

属性：subtitle type:节点可用于在卡头中呈现字幕

因此，您可以创建一个节点，例如列表：

const subtitle =<ul><li>{user.email},</li><li>{user.phone},</li><li> {user.isproved ? "Yes" : "No"},</li><li> Friends: {user.friends? user.friends : "None"}</li></ul>;

更新： 我发现了一个codeSanbox模板，所以这里有一个

return(
  <>
    <Card>
      <CardHeader 
      actAsExpander={true}
      showExpandableButton={true}
      title = {user.name} 
      subtitle={subtitle} 
      />
    </Card>
</>
)