React渲染textarea输入内容时格式丢失，如何保留换行与缩进？

方案一：用CSS原生处理换行（无需用户写HTML） #

如果不想让用户接触HTML标签，只需要保留textarea里的换行和合理间距，最省心的方式是给渲染内容的容器加CSS样式：

• 用white-space: pre-line;：保留换行符，同时自动合并连续空格，适合诗歌的换行需求，排版更自然
• 用white-space: pre-wrap;：保留所有换行和空格（包括缩进），适合需要严格格式的内容

示例CSS：

.blog-content {
  white-space: pre-line;
  /* 可选：添加行高、字体等样式适配博客排版 */
  line-height: 1.6;
}

渲染时把Firebase读取的文本内容放到带blog-content类的<div>里即可，不用改用<pre>标签——<pre>会强制使用等宽字体，还会保留所有空白，容易破坏博客整体排版，这也是你之前改<pre>没达到预期的原因。

方案二：允许用户在textarea中使用HTML标签（需注意安全） #

如果要让用户通过HTML标签（比如<br>、<p>、<pre>）精准控制格式，按以下步骤处理：

1. 存储内容：直接把用户在textarea中输入的HTML字符串存入Firebase实时数据库即可，数据库支持存储任意字符串。
2. 安全渲染：用户输入的HTML可能包含恶意代码（XSS攻击），必须先过滤再渲染：
   • React项目示例（使用DOMPurify库过滤）：

     import DOMPurify from 'dompurify';
     
     function BlogPost({ content }) {
       // 先过滤恶意代码
       const safeContent = DOMPurify.sanitize(content);
       // 渲染处理后的HTML
       return <div dangerouslySetInnerHTML={{ __html: safeContent }} />;
     }
     

   • Vue项目示例：

     <template>
       <div v-html="safeContent"></div>
     </template>
     <script>
     import DOMPurify from 'dompurify';
     export default {
       props: ['content'],
       computed: {
         safeContent() {
           return DOMPurify.sanitize(this.content);
         }
       }
     }
     </script>
     

Firebase存储注意事项 #

Firebase实时数据库对纯文本或HTML字符串的存储没有特殊限制，直接写入、读取即可。如果选择方案一，存储的是纯文本；方案二则存储HTML字符串，读取后按对应方式处理渲染。

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