我正在使用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'));
}}/>
有任何想法吗?谢谢!
你可以在翻译文本中用css white-space: pre-line;
和\n
来做。
<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} />
例如,您在JSON语言文件中写下以下文本。
文字:“你好\你好吗?\你在做什么?”
然后作为回报部分写
<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'中分离并使用方法映射类型将它们分别放在段落上以便断行;))