如何从Spring Controller传递JSON字符串至React前端？

我来给你梳理几种不用Thymeleaf也能把Spring Controller里的树形JSON数据传到React前端的实用方案，都是实际项目里常用的，你可以根据自己的场景来选：

这是现在最主流的前后端协作方式，Spring只负责提供数据接口，React主动请求数据，耦合度低还方便扩展。

Spring 侧代码（写一个返回JSON的接口） #

@RestController
@RequestMapping("/api")
public class FileTreeController {
    @GetMapping("/file-tree")
    public ResponseEntity<?> getFileTreeData() {
        // 这里构造你需要的树形JSON数据（或者从服务层获取）
        Map<String, Object> fileTree = new HashMap<>();
        fileTree.put("name", ".");
        fileTree.put("size", 0);
        // 填充children数组...
        
        return ResponseEntity.ok(fileTree);
    }
}

React 侧代码（用fetch请求接口） #

import { useEffect, useState } from 'react';

function FileTreeComponent() {
    const [fileTree, setFileTree] = useState(null);

    useEffect(() => {
        async function fetchTreeData() {
            try {
                const response = await fetch('/api/file-tree');
                const data = await response.json();
                console.debug(data); // 这里就能像之前一样打印出树形数据了
                setFileTree(data);
            } catch (error) {
                console.error('请求文件树数据失败:', error);
            }
        }
        fetchTreeData();
    }, []);

    return (
        <div>
            {/* 这里写你的树形结构渲染逻辑 */}
        </div>
    );
}

export default FileTreeComponent;

如果你还是想在页面初始化时就把数据直接塞给前端，不想走接口请求，可以用这种方式：

Spring 侧代码（把JSON转成字符串传到页面模板） #

@Controller
public class PageController {
    @GetMapping("/")
    public String index(Model model) {
        // 构造你的树形数据对象
        Object fileTreeData = buildYourFileTree();
        
        // 把Java对象转成合法的JSON字符串，避免转义问题
        ObjectMapper objectMapper = new ObjectMapper();
        try {
            String jsonStr = objectMapper.writeValueAsString(fileTreeData);
            model.addAttribute("jsondata", jsonStr);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return "index";
    }
}

HTML 模板（在React脚本前注入全局变量） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Tree Viewer</title>
</head>
<body>
    <div id="root"></div>
    <!-- 先把数据注入成全局变量，确保在React加载前执行 -->
    <script>
        window.fileTreeData = JSON.parse('[[${jsondata}]]');
    </script>
    <!-- 再加载React的打包脚本 -->
    <script src="/static/js/main.js"></script>
</body>
</html>

React 侧代码（直接读取全局变量） #

import { useState, useEffect } from 'react';

function FileTreeComponent() {
    const [fileTree, setFileTree] = useState(window.fileTreeData);

    useEffect(() => {
        console.debug(fileTree); // 同样能打印出目标数据
    }, []);

    // ...渲染逻辑
}

export default FileTreeComponent;

• 如果用方案1的接口请求，要是前后端分开部署，记得在Spring Controller上加@CrossOrigin解决跨域问题；
• 方案2里一定要用ObjectMapper把Java对象转成JSON字符串，手动拼接容易出现引号转义错误，导致前端JSON.parse失败；
• 注入全局变量的脚本必须放在React脚本之前，不然React加载时变量还没赋值会报错。

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