\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.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>;

一种可能的解决方案是，通过\n对字符串进行.split()，然后使用.map()呈现<p>标记之间迭代的每个元素。
尝试以下操作：

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

您将得到类似的结果-这不是使用JSX，只是为了表示：
x一个一个一个一个x一个一个二个x
希望这能有所帮助!

只使用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>

使用\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>);