內部帶有轉換日期的材料 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" }}
      />

鏈接： 代碼沙盒

我必須在里面放一個material ui chip ，開始日期和結束日期，用符號分隔。

例子：

開始日期 ( DD/MM/YYYY HH:mm ) - 結束日期 ( DD/MM/YYYY HH:mm )

我正在使用時刻進行日期轉換。

但我得到了[obj obj]類型。

誰能幫我嗎？

Answer 1

material-ui 標簽需要一個節點，查看文檔

所以我們需要傳遞一個節點作為標簽

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

更新的沙箱

使用您的實現${(<Moment format="DD/MM/YYYY HH:mm">{el.from}</Moment>)}...組件是一個對象，當它包裹模板字符串時，它將打印出 [object, object]，因為 object.toString() 會調用並返回 [object, object]

Answer 2

這是工作

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