如下所示设置段落的CSS样式，它将在\n处断行并根据父宽度自动换行。

white-space: pre-wrap;

或

white-space: pre-line;

更传统的方法是用字符串创建一个数组，中间有一个<br />标记。从React v16开始，数组是Elements的有效返回值。

class App extends React.Component {
  render() {
    const arr = ['Line 1. ', <br />, 'Line 2.'];
    return (
      <p> {arr} </p>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

如果您从某个API获取字符串，您可以通过查找所有<br />子字符串并将其替换为实际的JSX <br />来创建这样一个数组。下面的代码将接受您的字符串，并在<br />的每个示例上进行字符串拆分。这将给予['Line 1. ', '', 'Line 2.']。如您所见，数组中的每个奇数元素都是我们要推送JSX <br />的位置。我们可以在一个循环中很简单地做到这一点。

class App extends React.Component {
  render() {
    const str = 'Line 1. <br /> Line 2.';
    const arr = str.split(/<br \/>/);
    const resultArr = [];
    arr.forEach((item, i) => {
      if(i%2===0) resultArr.push(<br />);
      resultArr.push(item);      
    });
    return (
      <p> {resultArr} </p>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

另一种方法是使用dangeourslySetInnerHTML()或使用模板文字。
你可以使用模板文字和css规则white-space: pre来保留换行符。看看我下面的演示：

class App extends React.Component {
  render() {
    const str = `Line 1.  
 Line 2.`;
    return (
      <p style={{whiteSpace: 'pre'}}> {str} </p>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

style={{ whiteSpace: 'break-spaces' }}

为此，您必须使用名为dangerouslySetInnerHTML的东西。

示例

render() {
  const str = 'Line 1. <br /> Line 2.';
  return (
    <p dangerouslySetInnerHTML={{ __html: str }}/>
  );
}

你可以通过使用CSS来实现这一点。

p {
    white-space: pre;
}

然后渲染为：

const str = "Line 1.\nLine 2."
return (<p>{str}</p>)

这就是我的工作

<span>{<br/>}</span>

使用CSS -（只需将其添加到内容的div。为附加到内容的每个'\n'换行并添加新行）

p {
    white-space: pre-wrap;
}

使用React的dangerouslySetInnerHTML -（应用于父div并解析value字段中的任何标签。类似于innerHTML）。

<div dangerouslySetInnerHTML={{__html: '<p>First &middot; Second</p>'}}></div>

有关dangerouslySetInnerHTML的更多信息，请链接：
[https：//reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml][1]

您可以通过执行以下操作轻松实现：

myTextHere={<span>Hello<br />Hi</span>}

输出将如下所示：

Hello
Hi