如何在反应使用状态字符串中添加新行答案

【问题标题】：How do I add a new line in a react usestate string如何在反应使用状态字符串中添加新行
【发布时间】：2021-08-04 20:07:39
【问题描述】：

目前我的代码是这样的：

const [simulationResult, setSimulationResult] = useState("");

let simulationFormatedString = "one /n two";
setSimulationResult(simulationFormatedString);

<div>
{simulationResult}
</div>

我想将结果显示为：一两个

代替：

一个

两个

【问题讨论】：

它是否以 HTML 格式显示？没有预先格式化的样式？在这种情况下使用<br>。另外，/n 应该是 \n
此代码原样会导致无限的重新渲染循环。因为渲染组件的行为会更新状态，从而触发重新渲染。这是你观察到的问题吗？
您好，不，现在它没有在 HTML 中显示，并且渲染它的函数的触发器是 onClick，因此没有观察到无限渲染循环

标签： javascript react-native react-hooks use-state

【解决方案1】：

正如@dandavis 所说，换行符是\n 而不是/n

然后，您可以通过将其替换为零空格""来删除它

const [simulationResult, setSimulationResult] = useState("");

const simulationFormatedString = "one \n two";
const finalSimulationString = simulationFormatedString.replace(/\r?\n|\r/g, "");
setSimulationResult(<span>{finalSimulationString}</span>);

<div>
{simulationResult}
</div>

【讨论】：