\n 未在新行中呈现文本

Question

我有一些动态 JSON 字符串，如下所示：

Status is unknown\nThe combination is excluded by the following restriction\nRestriction number 2. 01 Mar 12 08:03:01 0--Exclusion--OrderDeliveryTimeframe.equals(\"oneMonth\") && OrderShipping.equals(\"air\")\n\n

因此，当我打印与输出相同的内容时，\n不会在新行中渲染文本。所以我写了下面的代码：

return <div>
  {item.intro.replace(/[\n \n\n]/g, "\n")}
     <br/>

现在的问题是 - 它在遇到第一次出现 后渲染下一行中的文本\n，但之后不再渲染。它也不适用于\n\n. 我想我错过了一些东西。有人可以帮我解决这个问题吗？提前致谢。

Answer 1

\n不是 HTML 中的换行符，它只是一个空格。HTML 中的任何一系列空白字符都被视为一个空格。

其中的 React 部分是如何使用br元素来做你想做的事情。

最简单的方法是告诉div不同地对待空白，正如这个问题的答案中所讨论的。

return <div style={{whiteSpace: "pre-line"}}>
    {item.intro}
</div>;

或者您可以使用元素换行，例如 adiv或p：

return <div>
    {item.intro.split(/\n/).map(line => <div key={line}>{line}</div>)}
</div>;

或者，如果您想要br行之间的元素，您可以使用片段：

return <div>
    {item.intro.split(/\n/).map(line => <React.Fragment key={line}>{line}<br/></React.Fragment>)}
</div>;

（我们不能使用速记<>___</>形式，因为它们不支持键。）

但我不喜欢最后一个，因为它以<br/>. 你可以解决这个问题，但它更复杂：

return <div>
    {item.intro.split(/\n/).map((line, index) => index === 0 ? line : <React.Fragment key={line}>{line}<br/></React.Fragment>)}
</div>;