反应:在本地化文本中插入换行符

Question

我正在从 JSON 文件中获取本地化文本并将其显示到页面，我的问题是n和<br>表示法被忽略了。

我在这里制作了一个代码沙箱来展示文本如何不放在多行上。

import * as React from "react";
import { render } from "react-dom";
const App: React.FC = props => {
const Translations: {
[key: string]: {
fname: string;
};
} = {
en: {
fname: "I want to insert a break in this line of text so it shows on two lines n doesnt work and <br> does either",
},
cn: {
fname: "我想在这一行文本中插入一个中断，以便在两行中显示 n不起作用，而<br>可以",
}
};
const txt = Translations["en"];

return (
<div className="App">
<p>{txt.fname}</p>
</div>
);
};
const rootElement = document.getElementById("root");
render(<App />, rootElement);

Answer 1

为了尊重n，可以添加white-space: pre-line或white-space: pre-wrap的样式。

在 React 中，它看起来像这样：

return (
<div className="App">
<p style={{ whiteSpace: "pre-line" }}>{txt.fname}</p>
</div>
);

这是一个分叉的沙盒。

Answer 2

使用 CSS 属性white-space: pre-line<p style={{ whiteSpace: "pre-line" }}>{txt.fname}</p>

Answer 3

您可以使用dangerouslySetInnerHTML，但是请确保使用像DOMPurify这样的smth来清理您的输入：

return (
<div className="App">
<p
dangerouslySetInnerHTML={{
__html: txt.fname
}}
/>
</div>
);

如评论中所述，另一种方法是将<br>替换为n并添加whiteSpace: "pre-line"css规则：

return (
<div className="App">
<p style={{ whiteSpace: "pre-line" }}>
{txt.fname.replace("<br>", "n")}
</p>
</div>
);

工作沙盒。

Answer 4

你总是可以使用JSX代替 - 它看起来像这样

en: {
fname: <p>"I want to insert a break in this line of text so it shows on two lines n doesnt work and <br> does either"</p>
}

return (
<div className="App">
{txt.fname}
</div>
);