React组件Props字符串如何实现换行？

问题场景 #

父组件传递带换行的字符串Props时，子组件使用white-space: pre-line渲染后，每行开头会保留原字符串中的前导空格，显示效果不符合预期：

• 父组件代码：

<SampleComponent title="One 
 Two 
 Three">

• 子组件代码：

type SampleComponentProps = {
  title: string;
};

export const SampleComponent: FC<SampleComponentProps> = ({
  title,
}) => {
  return (
     <div style={{whiteSpace:'pre-line'}}>{title}</div>
  );
};

• 当前显示：

One 
 Two 
 Three

• 预期显示：

One
Two
Three

原因 #

父组件传入的字符串中，换行后的行带有前导空格，white-space: pre-line会保留这些空格，因此渲染时每行开头会多出空白。

解决方案 #

方案1：直接修正父组件传入的字符串 #

如果可以修改父组件传参，去掉换行后的前导空格即可：

<SampleComponent title="One
Two
Three">

这种方式最直接，从源头避免多余空格。

方案2：子组件内处理字符串（动态场景适用） #

如果字符串是动态生成的，或者无法修改父组件代码，可以在子组件中用正则表达式去掉每行开头的空白字符：

type SampleComponentProps = {
  title: string;
};

export const SampleComponent: FC<SampleComponentProps> = ({
  title,
}) => {
  // 全局匹配每行开头的空白字符（不包含换行）并替换为空
  const cleanedTitle = title.replace(/^[^\S\n]+/gm, '');

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

正则说明：

• ^ 匹配行开头
• [^\S\n] 匹配除换行外的所有空白字符（空格、制表符等）
• + 匹配一个或多个
• gm 全局（global）+ 多行（multiline）模式，确保处理所有行

方案3：使用模板字符串（父组件传参优化） #

如果父组件习惯用模板字符串传递参数，直接去掉换行后的空格即可：

<SampleComponent title={`One
Two
Three`}>

效果和方案1一致，写法更灵活。

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