时间戳

首页 > 解决方案 > React 中的模板字符串

javascript - React 中的模板字符串

问题描述

我得到以下代码：

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.`}

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

标签： javascriptreactjs

解决方案

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

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>

推荐阅读