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

【问题标题】：Line break in a CardHeader element subtitle (MaterialUI / ReactJS)CardHeader 元素副标题中的换行符（MaterialUI / ReactJS）
【发布时间】：2021-02-04 08:57:36
【问题描述】：

我正在使用相当旧的 Material UI (Ver. 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 甚至 '...string' + <br/> + 'string...' 都不起作用。我该怎么办？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

我无法在沙盒中进行测试，但如果我们查看 Material-ui 的 0.20.1 版文档，我们可以看到：

property：subtitle type：node 可用于在Card Header中渲染字幕。

这样您就可以创建一个节点，例如一个列表：

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

并将其传递给subtitle，如下所示：

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

更新：
我找到了一个 codeSanbox 模板，所以这里有一个工作 example

【讨论】：