在Next.js中如何给传递给组件的字符串添加换行？

你的问题出在HTML对文本换行的处理逻辑上：<p>标签默认会忽略字符串中的\n换行符，而直接传递<br>标签会被React转义成普通文本显示。下面提供三种实用解决方案：

方案一：用CSS让\n生效（推荐） #

给<p>标签添加white-space: pre-line样式，让浏览器解析字符串中的\n为换行，同时自动合并多余空格。修改ContentBlock组件：

export const ContentBlock = ({ title, content }: { title: string, content: string }) => {
  return (
    <div style={{ width: '100%', paddingTop: '20px', paddingRight: '10px'}}>
      <h2 style={{
        borderBottom: '4px solid #A1DAFD',
        borderTop: '4px solid #A1DAFD',
        textAlign: 'left',
        padding: '10px ', color: '#4434A6', fontSize: '40px', fontFamily: 'Sanchez', fontWeight: 'bold' 
      }}> {title} </h2>
      <p style={{
        color: '#4434A6', 
        fontSize: '24px', 
        fontFamily: 'League Spartan', 
        paddingTop: '15px',
        whiteSpace: 'pre-line' // 新增样式
      }}> {content} </p>
    </div>
  );
}

你的原有调用代码无需修改，\n会自动生效：

<div style={{display: 'flex', flexDirection: 'column', alignSelf: 'stretch'}}>
  <ContentBlock title="Sample Title" 
      content="Sample Content 1\nSample Content 2\nSample Content 3\nSample Content 4"></ContentBlock>
  <ContentBlock title="Second Content Block" content="Example"></ContentBlock>
</div>

方案二：让组件支持JSX内容 #

如果需要更复杂的内容排版（比如混合文本和元素），可以把content的类型改为React.ReactNode，直接传递JSX：

import React from 'react';

export const ContentBlock = ({ title, content }: { title: string, content: React.ReactNode }) => {
  return (
    <div style={{ width: '100%', paddingTop: '20px', paddingRight: '10px'}}>
      <h2 style={{
        borderBottom: '4px solid #A1DAFD',
        borderTop: '4px solid #A1DAFD',
        textAlign: 'left',
        padding: '10px ', color: '#4434A6', fontSize: '40px', fontFamily: 'Sanchez', fontWeight: 'bold' 
      }}> {title} </h2>
      <p style={{
        color: '#4434A6', 
        fontSize: '24px', 
        fontFamily: 'League Spartan', 
        paddingTop: '15px'
      }}> {content} </p>
    </div>
  );
}

调用时直接传入带<br>的JSX片段：

<div style={{display: 'flex', flexDirection: 'column', alignSelf: 'stretch'}}>
  <ContentBlock 
    title="Sample Title" 
    content={
      <>
        Sample Content 1<br />
        Sample Content 2<br />
        Sample Content 3<br />
        Sample Content 4
      </>
    }
  />
  <ContentBlock title="Second Content Block" content="Example" />
</div>

方案三：使用dangerouslySetInnerHTML（谨慎使用） #

如果必须传递包含<br>的字符串，可以用dangerouslySetInnerHTML解析HTML标签，但仅在内容完全可信时使用，避免XSS攻击：

export const ContentBlock = ({ title, content }: { title: string, content: string }) => {
  return (
    <div style={{ width: '100%', paddingTop: '20px', paddingRight: '10px'}}>
      <h2 style={{
        borderBottom: '4px solid #A1DAFD',
        borderTop: '4px solid #A1DAFD',
        textAlign: 'left',
        padding: '10px ', color: '#4434A6', fontSize: '40px', fontFamily: 'Sanchez', fontWeight: 'bold' 
      }}> {title} </h2>
      <p style={{
        color: '#4434A6', 
        fontSize: '24px', 
        fontFamily: 'League Spartan', 
        paddingTop: '15px'
      }} 
      dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
}

调用时传递带<br>的字符串：

<div style={{display: 'flex', flexDirection: 'column', alignSelf: 'stretch'}}>
  <ContentBlock title="Sample Title" 
      content="Sample Content 1<br>Sample Content 2<br>Sample Content 3<br>Sample Content 4"></ContentBlock>
  <ContentBlock title="Second Content Block" content="Example"></ContentBlock>
</div>

内容的提问来源于stack exchange，提问作者sebriverso