Javascript 断线-反应支柱

我有一个组件

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

---

提前感谢您的帮助

您可以创建一个包含实际文本行的数组 使用

split

（即

const line=text.split（'\n'）

）

然后可以映射到该数组以渲染 一行一行

lines.map（line=>…）

将“\n”上的文本属性拆分，并将结果数组映射到

片段中的
p
标记中，使用
br
元素


函数Ren1（{text}）{
返回(

{text.split（\\n”）.map（（行，索引）=>(
{line}


))}

);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
您可以在不拆分文本值的情况下执行此操作

首先，在传递文本道具时，在其周围放置大括号：

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

这将增加段落分隔符，而OP可能不希望这样。用

{line}
包装将是一种可行的选择。
<Text text={"One \n Two \n Three"} />

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