React JS中的新行

在React JS中，新行是如何完成的呢？一般来说，我们可以使用<br>标签来进行换行，但在React中，我们需要使用其他方法。

使用<p>标签

最常见的方法是使用<p>标签来组织文本，并且在需要换行的地方添加两个空格，这样就能够实现文本换行的效果。

function MyComponent() {
  return (
    <div>
      <p>这是一段</p>
      <p>有多行的</p>
      <p>文本啊！</p>
    </div>
  );
}

使用CSS样式

另一种方式是使用CSS样式来实现换行的效果。我们可以给需要换行的元素添加white-space: pre-line;属性，然后在需要换行的地方使用\n表示换行。

function MyComponent() {
  const textWithBreaks = "这是一行文本\n这是另一行文本\n这是最后一行文本";

  return (
    <div style={{ whiteSpace: "pre-line" }}>
      {textWithBreaks}
    </div>
  );
}

使用React.Fragment

最后一种方法是使用React.Fragment来分割文本，并在需要换行的地方添加<br>标签。

function MyComponent() {
  return (
    <div>
      <React.Fragment>
        这是一段文本。<br />
        这是另一段文本。
      </React.Fragment>
    </div>
  );
}

以上就是React JS中实现新行的三种方法，针对不同的场景进行选择即可。