内含转换日期的材质ui芯片答案

【问题标题】：Material ui chip with the converted date inside内含转换日期的材质ui芯片
【发布时间】：2020-09-29 10:39:36
【问题描述】：

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

链接：codesandbox

我必须在material ui chip 中输入开始日期和结束日期，并用符号分隔。

例子：

开始日期 (DD/MM/YYYY HH:mm) - 结束日期 (DD/MM/YYYY HH:mm)

我正在使用 moment 进行日期转换。

但我得到了[obj obj]的类型。

谁能帮帮我？

【问题讨论】：

标签： javascript reactjs date momentjs data-conversion

【解决方案1】：

material-ui label 需要一个节点，请查看文档

所以我们需要传递一个节点作为标签

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

更新sandbox

您的实现${(<Moment format="DD/MM/YYYY HH:mm">{el.from}</Moment>)}... 组件是一个对象，当它包裹模板字符串时，它将打印出 [object, object]，因为 object.toString() 将调用并返回 [object, object]

【讨论】：

【解决方案2】：

它的工作

   label={
          <>
            <Moment format="DD/MM/YYYY HH:mm">{el.from}</Moment>
            -
            <Moment format="DD/MM/YYYY HH:mm">{el.from}</Moment>
          </>
        }

【讨论】：