\n 没有在新行中呈现文本答案

【问题标题】：\n is not rendering the text in new line\n 没有在新行中呈现文本
【发布时间】：2022-01-11 23:53:55
【问题描述】：

我有一些动态 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。我想我错过了一些东西。有人可以帮我解决这个问题。提前致谢。

【问题讨论】：

stackoverflow.com/questions/39325414/line-break-in-html-with-n 的可能重复项？

标签： javascript reactjs

【解决方案1】：

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

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

最简单的方法是告诉div 以不同的方式处理空白，as discussed in this question's answers。

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

或者你可以用一个元素来换行，例如div 或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.Frgament key={line}>{line}<br/></React.Fragment>)}
</div>;

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

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

【讨论】：

【解决方案2】：

只使用 css white-space:pre 怎么样：

您可以运行以下脚本，希望对您有所帮助。

const { useState , useEffect } = React;

const App = () => {

  const nstr = "Hi Vivek \nHow are you \n\nGlad to see you there";

  return (
    <div class='new-line'>
      { nstr }
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

.new-line {
 white-space:pre
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

【讨论】：

【解决方案3】：

如果您通过\n .split() 字符串然后使用.map() 渲染来自<p> 标记之间的迭代的每个元素，这可能是一种解决方案。

尝试如下：

return <div>
  {
     item.intro.split('\n')
               .map(e => <p>{e}</p>)
  }
</div>

你会得到类似的结果 - 这不是使用 JSX，只是为了表示：

const text = 'random\ntext\nhello';
const div = document.getElementById('text');
const result = text.split('\n').map(e => `<p>${e}</p>`);

div.innerHTML = result.join('');

&lt;div id="text"&gt;&lt;/div&gt;

我希望这会有所帮助！

【讨论】：

【解决方案4】：

使用\n 拆分字符串，然后通过循环生成的数组来显示它们。这样就可以得到预期的输出。希望这会有所帮助

var text = "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
";
    return (
    <div>
        {text.split("\n").map((t,key) => {
            return <p key={key}>{t}</p>;
        })}
    </div>);

【讨论】：