换行 - React Prop

Question

我有一个组件<Ren1 text="Line1\nLine2\nLine3" />...

function Ren1({text}){
  return <p>{text}</p>;
}
export default Ren1

\n当来自数据库时，如何添加换行符？

所需输出：

Line1
Line2
Line3

预先感谢您的帮助

Answer 1

您可以在不拆分文本值的情况下完成此操作。

首先，当你传递它时，在 text 属性周围加上大括号：

<Text text={"One \n Two \n Three"} />

然后使用whiteSpace: "pre-line"样式

<div style={{ whiteSpace: "pre-line" }}>{props.text}</div>

沙箱