在 react-i8next 中使用链接

Question

我正在通过在线资源学习 React，但找不到解决问题的方法-

假设我有一个 json 文件 -

"test":"This is a test file, contact at {{email}}"

目前我将它用作 -

const [t] = useTranslation();

<div>t('test',{{email}})<div>

假设我只想更改电子邮件文本的颜色，我该怎么做？我在网上查了资料，看了Transcomponent的文档，但是我无法理解如何实现它。

Answer 1

您可以使用 css 文件处理该问题，为此您需要将其导入到 react 组件文件中：

import './styles.css';

为此，您应该在与 react 文件相同的 folder/directory 上创建一个 style.css 文件，然后您应该设置一个 css 规则：

a {
  color: hotpink;
}

Answer 2

您必须从翻译后的文本中排除 {{email}} 占位符。

所以这将是 i18n 部分：

{
  "test": "This is a test file, contact at"
}

这就是 React 部分：

const { t } = useTranslation();

return (
  <div>
    {t("test")} <span style={{color: "hotpink"}}>{email}</span>
  </div>
);

您尝试做的事情有很多变体（例如，使用外部样式表、CSS 类，等等），但这是一种直接的方法。

using links in react-i8next