如何在const和export中包含href

Question

我从一个constant.js文件导入我的应用程序的所有常量。

export const txt = Click <a href="index.html">Here!<a>

我希望在该常量中添加href。

例如：

"Click <a href='index.html'>Here!</a>"

但这没有按预期工作。 打印相同的

{{1}}

Answer 1

with react，你不能像这样设置innerHtml，正确的修复方法是渲染你的反应虚拟DOM的子项。 或者，您可以使用

dangerouslySetInnerHTML={{ __html: your html code }}

https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html

Answer 2

鉴于您正在尝试进行国际化，如果您不打算使用任何其他库，那么dangerourslySetInnterHTML是唯一可行的方法（see official docs）

但是国际化还有许多其他用例，这些用例可能不容易被本土解决方案（复数，同义翻译等）处理，为此我个人使用并推荐：react-i18next（website）

您希望使用anchor标记的情况下，图书馆的Trans Component会派上用场。

国际化

Click <a href='index.html'>Here!</a>

您必须将其包装在Trans组件中：

<Trans i18nKey="myHref">
    Click <a href='index.html'>Here!</a>
</Trans>

您的翻译将如下所示：

"myHref": "Click <1><0>Here!</1>,

要将其更改为其他消息，您不必更改代码，只需更改字典：

"myHref": "Please <1><0>click here</1>,

请浏览他们的官方网站。他们拥有不错的文档，并在他们的github回购中主持示例。