Question

我尝试将JSON作为String从我的Spring Controller传递给React Frontend。

JSON：

{
  "name": ".",
  "size": 0,
  "children": [
    {
      "name": "setup.bat",
      "size": 6,
      "children": []
    },
    {
      "name": "src",
      "size": 0,
      "children": [
        {
          "name": "main",
          "size": 0,
          "children": [
            {
              "name": "java",
              "size": 0,
              "children": [
...

我尝试使用Thymeleaf并且我网站上的控制台输出工作：

index.html

$( document ).ready(function() {
   var jsondata = /*[[${jsondata}]]*/;
   console.debug(jsondata);
});

但现在我尝试使用它反应我得到一个错误：

app.js：

class App extends Component {
    render() {
        return(
            <div>
                {jsondata}
            </div>
        )
    }
}

未捕获的ReferenceError：未定义jsondata

React有什么问题？

Answer 1

直接在window对象上设置和访问JSON。

window.jsondata = /*[[${jsondata}]]*/;

class App extends Component {
    render() {
        return(
            <div>
                {window.jsondata}
            </div>
        )
    }
}

Answer 2

<强>解决方案：

我可以将Javascript var与我的React代码一起使用，但问题出在我的html文件中。我做了错误的脚本顺序。

如果我在最后使用React包它可以工作：

<强>的index.html：

<script th:inline="javascript">
   var jsondata = /*[[${jsonHierarchy}]]*/;
   console.log(jsondata);
</script>
<script src="/bundle.js"></script>

将JSON从Spring Controller传递到React

2 个答案: