如何使用反应在 Ui 上显示嵌套的 json

Question

我有一个嵌套的 JSON，我正在通过它制作 UI，我已经成功创建了第一部分，我面临的问题是第二部分。

我要做什么

我有一个嵌套的 json 来显示父元素，现在我要做的是单击任何父元素，它应该显示该特定数据。

假设我点击了 parent1，所以它应该显示父母一的孩子。

我的 JSON 数据

    [
  {
    "name": "parent1",
    "url": "url1",
    "child": [
      {
        "name": "child1",
        "url": "child_url1",
        "grand_child": [
          {
            "name": "some name",
            "url": "some url"
          }
        ]
      },
      {
        "name": "child2",
        "url": "child_url2"
      },
      {
        "name": "child3",
        "url": "child_url3"
      }
    ]
  },
  {
    "name": "parent2",
    "url": "url2",
    "child": [
      {
        "name": "child22",
        "url": "child_url22"
      }
    ]
  },
  {
    "name": "parent3",
    "url": "url3",
    "child": [
      {
        "name": "child33",
        "url": "child_url33"
      },
      {
        "name": "child44",
        "url": "child_url44"
      },
      {
        "name": "child55",
        "url": "child_url55"
      }
    ]
  }
]

我在做什么

<div className="row">
            {d.map((li) => (
                <div className="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
                    <div onClick={() => on_click}>{li.name}</div>
                </div>
            ))}
        </div>

但现在我不知道如何在 onClick 之后显示其他部分如何拥有该特定数据。

我想要达到的目标类似于this Code sandbox

在我的代码沙箱中，我只显示 parent3 的孩子（假设当时被点击）

Answer 1

我假设您将 json 作为组件的道具。您需要调用 renderParent 函数来处理包括子数组在内的完整 json 的呈现。

function renderChild(child) {
    return child && child.map((childItem)=>(
      <div>{childItem.name}</div>
    ))
  }

  function renderParent() {
    return props.data && props.data.map(item => ( <div>
    <div>{item.name}</div>
    // add your parent json data here for rendering
    <div>{renderChild(item.child)}</div>
    </div>));
  }

return (
  <div>
  {renderParent()}
  </div>
);

Answer 2

据我了解，您希望在单击父级时显示子级元素并且所有代码都驻留在单个反应函数组件中。

所以我从代码沙箱中稍微更改了您的代码，并使用 React State Hooks 来实现您的功能。 检查代码示例：Code Sandbox Demo

希望这是您正在寻找的。 和平

Answer 3

使用pre标签和json字符串。

<pre>{JSON.stringify(YOUR_JSON)}</pre>

Answer 4

您可以使用 divBody 值显示嵌套的 json 元素

 let divBody = nestedJsonArray.map(item => (
              <div>
                <div>{item.url}</div>
                <div>{item.name}</div>
                <div>
                 {
                    item.child.map(citem=>(
                      <div>{citem.name}</div>
                    ))
                 }
                </div>
              </div>
            ));

 

Answer 5

检查一下...您需要在父级单击时保存当前父级子级，我正在保存状态，然后只显示那个子级，这里是 代码沙箱链接：https://codesandbox.io/s/priceless-robinson-yk03j?file=/src/App.js:0-2010

import React, { useState } from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

const data = [
  {
    name: "parent1",
    url: "url1",
    child: [
      {
        name: "child1",
        url: "child_url1",
        grand_child: [
          {
            name: "some name",
            url: "some url"
          }
        ]
      },
      {
        name: "child2",
        url: "child_url2"
      },
      {
        name: "child3",
        url: "child_url3"
      }
    ]
  },
  {
    name: "parent2",
    url: "url2",
    child: [
      {
        name: "child22",
        url: "child_url22"
      }
    ]
  },
  {
    name: "parent3",
    url: "url3",
    child: [
      {
        name: "child33",
        url: "child_url33"
      },
      {
        name: "child44",
        url: "child_url44"
      },
      {
        name: "child55",
        url: "child_url55"
      }
    ]
  }
];

export default function App() {
  const [child, setChild] = useState([]);
  const [currentParent, setCurrentParent] = useState("");

  const on_click = name => {
    const parent = data.filter(parent => parent.name === name);
    console.log(parent);
    setCurrentParent(parent[0].name);
    setChild(parent[0].child);
  };

  return (
    <div className="App">
      <div className="row">
        {data.map((parent, i) => (
          <div className="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" key={i}>
            <div onClick={() => on_click(parent.name)}>{parent.name}</div>
            {currentParent === parent.name &&
              child.map((data, i) => (
                <div key={i}>
                  {data.name}{" "}
                  {data.grand_child &&
                    data.grand_child.map((gc, i) => (
                      <li className="pl-4 ml-4" key={i}>
                        {gc.name}
                      </li>
                    ))}
                  <br />
                </div>
              ))}
          </div>
        ))}
      </div>
    </div>
  );
}