React中Material-UI CardHeader的subheader渲染异常如何解决？

这个问题我之前也碰到过，核心原因很简单：你把字符串和**React元素（

）**直接用加号拼接时，JavaScript会把React元素转换成它的默认字符串表示[object Object]，这就是为什么你看到的结果是“18 minutes ago by [object Object]”。

正确的实现方式 #

React的JSX语法支持直接组合表达式和元素，不需要用字符串拼接的方式。你可以用以下几种方法解决：

方法1：使用React片段组合内容

用React的短片段语法<>...</>（或者完整的<React.Fragment>）把时间字符串和元素包裹起来：

<CardHeader 
  title={card.title} 
  subheader={
    <>
      {moment(card.createdAt).startOf('minute').fromNow()} by <div>ABC</div>
    </>
  }
/>

方法2：动态内容直接嵌入

如果"ABC"是动态数据（比如卡片作者名称），直接在JSX里嵌入变量即可：

// 假设card.author.name是作者名称
<CardHeader 
  title={card.title} 
  subheader={
    <>
      {moment(card.createdAt).startOf('minute').fromNow()} by <div>{card.author.name}</div>
    </>
  }
/>

方法3：去掉不必要的包裹元素

如果不需要给"ABC"单独加div样式，也可以直接写文本：

<CardHeader 
  title={card.title} 
  subheader={
    <>
      {moment(card.createdAt).startOf('minute').fromNow()} by ABC
    </>
  }
/>

原理说明 #

JSX允许你在大括号{}中插入任何有效的JavaScript表达式，包括React元素。用片段包裹后，React会正确识别并渲染所有内容，而不会把元素转换成对象字符串。

内容的提问来源于stack exchange，提问作者Or Messing