Material UI Chip嵌入Moment格式化日期出现[obj obj]问题求助

这个问题的核心原因是你在模板字符串中直接插入了React组件（<Moment>）——React组件本质是JavaScript对象，当你用${}把它转换为字符串时，就会输出[object Object]，而不是你期望的格式化日期文本。

下面给你两种可行的解决方案：

方案一：直接使用moment的JavaScript API格式化日期 #

如果你不需要<Moment>组件的React特性（比如自动更新、本地化渲染等），最直接的方式是跳过组件，用moment库的format方法在JS中生成格式化后的字符串，再拼接成Chip的label：

import moment from 'moment';
// 导入你的其他依赖...

<Chip
  label={`${moment(el.from).format("DD/MM/YYYY HH:mm")} - ${moment(el.to).format("DD/MM/YYYY HH:mm")}`}
  variant="outlined"
  color="primary"
  size="small"
  icon={<AccessTime />}
  style={{ padding: "4px" }}
/>

注意：你原来的代码里两次用了el.from，应该是笔误，我改成了el.from和el.to来对应开始/结束日期。

方案二：用JSX片段作为Chip的label #

如果你必须使用<Moment>组件（比如依赖它的React相关功能），可以利用Material UI Chip的label属性支持ReactNode类型的特性，直接传入JSX片段而不是字符串：

<Chip
  label={
    <>
      <Moment format="DD/MM/YYYY HH:mm">{el.from}</Moment>
      {' - '}
      <Moment format="DD/MM/YYYY HH:mm">{el.to}</Moment>
    </>
  }
  variant="outlined"
  color="primary"
  size="small"
  icon={<AccessTime />}
  style={{ padding: "4px" }}
/>

这里用React片段（<>...</>）把两个<Moment>组件和分隔符文本组合起来，Chip会正确渲染这些元素，而不会把它们当成对象处理。

两种方案都能解决你当前的[object Object]问题，你可以根据自己的需求选择合适的方式。

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