React 中的模板字符串

Question

我得到以下代码：

export default function CancelledPayment() {

  const linkPage = <Link to="/dashboard/payment" className={clsx(classes.paymentLinkTypography, classes.link)}> here </Link>;

  return (
    <Container>
      <Paper >
        <Paper />
        <Typography>
          {` To go back to your order please click ${linkPage}.You will be redirect in ${count} seconds.`}
        </Typography>
      </Paper>
    </Container>
  );
}

知道为什么它返回 linkPage 作为 [object Object] 吗？计数器是正确的，一切正常，只是这个链接页面不正常。如果我把它拿出来：

To go back to your order please click {linkPage}. {`You will be redirect in ${count} seconds.`}

它工作正常，在其他一些情况下也是如此，但我希望所有内容都在一行中，使用模板字符串。

Answer 1

模板字符串是创建字符串的工具。

JSX 是一个生成 DOM(ish) 对象的工具。

当你将一个对象强制转换为字符串时，你得到的"[object Object]"不是一些 JSX 源代码。

不要为此使用模板字符串。JSX 就是您所需要的。

    <Typography>
      To go back to your order please click {linkPage}.
     You will be redirect in {count} seconds.
    </Typography>