我正在与 i18next 合作进行reacthttps://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'));
}}/>
有任何想法吗？谢谢！
您可以在翻译文本中使用 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"
}
}
}
}, 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>例如，您在 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' 分开，并使用方法映射在段落上输入它们中的每一个，这样可以断行 ;))
<br />是正确的方法，但它没有进入文本或翻译。例子 ：
<div>
{'my text line 1'}
<br />
{'my text line 2'}
</div>
但是，如果您想将换行符 (\n) 保留在文本中，请使用危险的SetInnerHTML 这样做：
const text = "This is a line. \n This is another line. \n Yet another line";
<div dangerouslySetInnerHTML={text} />
你也可以用很容易做到的 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>
它会将翻译 JSON 中的 \n 解释为换行符！！！