Material ui 芯片，里面有转换后的日期

Question

<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" }}
      />

Link: codesandbox

我要在里面放一个material ui chip，开始日期和结束日期，用一个符号隔开。

示例：

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

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

但我得到类型 [obj obj]。

谁能帮帮我？

Answer 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() 将调用并且 return [对象，对象]

Answer 2

它的工作

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

Material ui 芯片，里面有转换后的日期

Material ui chip with the converted date inside

javascript

date

data-conversion

momentjs

reactjs