React 中的换行符

在 React 中，可以使用不同的方式来插入换行符。下面介绍了几种常用的方法。

1. 使用 <br> 标签

在 JSX 中，可以使用 <br> 标签来插入换行符。例如：

function App() {
  return (
    <div>
      Hello<br />
      World!
    </div>
  )
}

输出：

Hello
World!

2. 使用 CSS 样式

可以使用 CSS 样式来设置元素的样式，从而实现换行的效果。例如：

function App() {
  const styles = {
    whiteSpace: "pre-line"
  }

  return (
    <div style={styles}>
      Hello
      World!
    </div>
  )
}

输出：

Hello
World!

3. 使用字符串拼接

可以使用字符串拼接的方式来实现换行的效果。例如：

function App() {
  return (
    <div>
      {"Hello\n"}
      {"World!"}
    </div>
  )
}

输出：

Hello
World!

4. 使用回车符（\n）

可以直接在文本中使用回车符来插入换行符。例如：

function App() {
  return (
    <div>
      Hello
      {"\n"}
      World!
    </div>
  )
}

输出：

Hello
World!

以上是 React 中插入换行符的几种常用方式。根据不同的需求，可以选择不同的方法来实现换行的效果。