在 JSON 字符串中反应 i18n 换行

Question

我正在使用 i18next 进行 React 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

<br /> 是正确的方法，但它不会进入文本或翻译。示例：

<div>
  {'my text line 1'}
  <br />
  {'my text line 2'}
</div>

但是，如果您想在文本中保留换行符 (\n)，请使用 dangerouslySetInnerHTML 这样做：

const text = "This is a line. \n This is another line. \n Yet another line";
<div dangerouslySetInnerHTML={text} />

Answer 2

例如，您在 JSON 语言文件中编写以下文本。

正文："Hello \n How are you? \n what are you doing?"

然后在return部分写

<div id='app'><div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script>
      render() {
          return (
              text.split('\n').map(c => {
                  return ( <p> {c} </p>) 
                   });
                 )
               }
              

              ReactDOM.render(
                <BreakLine / >
                document.getElementById('app')
              )
</script>

好吧，当调用 split 方法时，尝试创建列表并从 '\n' 中分离出来，并使用方法映射类型将它们中的每一个都放在段落上以便可以换行 ;))

Answer 3

您可以在翻译文本中使用 css white-space: pre-line; & \n。

const root = document.getElementById('root');

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "key": "Hello world\nThis sentence should appear on the second line"
        // ----------------^ new line char
      }
    }
  }
}, function(err, t) {
  // initialized and ready to go!
  root.innerHTML = i18next.t('key');
});

#root {
  white-space: pre-line;
}

<script src="https://unpkg.com/i18next@15.0.9/dist/umd/i18next.min.js"></script>

<div id="root"></div>

Answer 4

您也可以使用 CSS 来做到这一点，这很容易做到：

CSS:

#root {
  white-space: pre-line;
}

HTML:

<script src="https://unpkg.com/i18next@15.0.9/dist/umd/i18next.min.js"></script>

<div id="root"></div>

它会将翻译中的\nJSON解释为换行符！！！

在 JSON 字符串中反应 i18n 换行

React i18n break lines in JSON String

html

json

i18next

reactjs