在JSON字符串中反应i18n换行

Question

我正在与i18next进行反应https://github.com/i18next/react-i18next。我正在努力在JSON语言文件的字符串中换行。

这是我已经尝试过的方法，不会中断新行：

line: "This is a line. \n This is another line. \n Yet another line"，
line: ("This is a line."+ <br/> + "This is another line. \n Yet another line")，
line: ('This is a line. <br/> This is another line. \n Yet another line')，

我显然尝试在每个句子后换行。这就是我所说的：

<TooltipLink onClick={() => {
    this.toggleHelpTextDialog(t('test:test.line'));
}}/>

有任何想法吗？谢谢！

Answer 1

您可以使用css white-space: pre-line;＆\n在翻译文本中执行此操作。

Answer 2

对于那些不想在 React 组件中添加 css 代码的人，您可以使用packageTrans中的组件。react-i18next

创建类似于以下内容的翻译键值：

{
  "message": "This is a line.<1/>This is another line.<1/>Yet another line"
}

然后，在您的 React 组件中，<Trans/>按如下方式使用该组件

<Trans i18nKey="message" components={{ 1: <br /> }} />

翻译值将呈现为