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

<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

您可以使用翻译文本中的css white-space: pre-line;和\n来做到这一点。

https://codesandbox.io/s/o95o8849jz

Answer 3

例如，您在JSON语言文件中的文本下方编写内容。

文本：“你好\ n你好吗？\ n你在做什么？”

然后返回

<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'分开，并在方法映射中在段落上键入它们中的每一个，以便可以换行;））

在JSON字符串中反应i18n断行

3 个答案: