React中如何将JSON中的\n转换为网页段落换行？

问题出在HTML的渲染规则上：普通文本里的\n换行符会被浏览器忽略，不会转换成页面上的换行效果。给你几种简单的解决办法：

方法一：拆分文本为段落标签 #

把JSON里的文本按\n分割成数组，每个段落用<p>标签包裹，这样既能实现换行，还能方便添加间距样式：

修改BookDetails组件中的渲染部分：

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

const BookDetails = () => {
  const { id } = useParams();
  const [blog, setBlog] = useState({});

  useEffect(() => {
    const url = `/blogs.json`;
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        const currentBlog = data.find(book => book.id == id);
        setBlog(currentBlog || {});
      });
  }, [id]); // 这里要把id加入依赖，不然路由id变化时不会重新请求数据

  return (
    <div className="px-6">
      <h2>书籍详情：{id}</h2>

      <h2 className="flex justify-center font-bold text-2xl mb-6">
        {blog.name}
      </h2>
      {/* 处理换行的核心代码 */}
      {blog.blog?.split('\n').map((paragraph, index) => {
        const trimmedPara = paragraph.trim();
        // 过滤掉空的段落（比如连续换行的情况）
        return trimmedPara ? (
          <p key={index} className="mb-4">
            {trimmedPara}
          </p>
        ) : null;
      })}
    </div>
  );
};

export default BookDetails;

方法二：用CSS强制解析换行符 #

给包裹文本的元素添加white-space: pre-line样式，浏览器会自动识别文本中的\n并转换成换行，同时会合并多余的空格：

// 渲染部分修改成这样
<h2 className="whitespace-pre-line">{blog.blog}</h2>

（如果用Tailwind CSS，直接加whitespace-pre-line类就行；如果是自定义CSS，就给元素设置white-space: pre-line;）

注意事项 #

• 方法一的优势是可以给每个段落单独加样式（比如间距、缩进），结构更清晰；方法二更简洁，适合不需要单独控制段落样式的场景。
• 原代码中useEffect的依赖数组是空的，要把id加进去，不然当路由参数id变化时，组件不会重新请求对应的数据，这是一个容易忽略的bug。

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