反应中的新行

Question

我正在尝试将以下代码发送到 React js 中的子组件：

\n\n

{\n    carPhoto: "../../images/small-logo.jpg",\n    make: "Mercedes",\n    price: "\xe2\x82\xac20000",\n    desc: "Vivamus gravida magna massa in cursus mi"\n}\n

\n\n

现在我试图将desc分成两行。\n我尝试使用\\n、\\r、\\r\\n

\n\n

desc: "Vivamus gravida magna<br /> massa in cursus mi"\ndesc: "Vivamus gravida magna\\nmassa in cursus mi"\ndesc: "Vivamus gravida magna\\r\\nmassa in cursus mi"\n

\n\n

但没有任何效果。有什么建议吗？

\n

Answer 1

<span>
 Example #1: <br /> newline
</span>
<span style={{ whiteSpace: 'pre-wrap' }}>
 {"Example #2: \r new line or \u000A new line"}
</span>
{/* do not forget add style { white-space: pre-wrap } */}
<Example3 text={"Example #2: \r new line or \u000A new line"} />