如何使用反應在 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 之后顯示其他部分如何擁有該特定數據。

我想要實現的是 這個代碼沙箱

在我的代碼沙箱中，我只顯示 parent3 孩子（假設當時點擊了）

Answer 1

根據我的理解，您希望在單擊父項時顯示子元素，並且所有代碼都駐留在單個反應 function 組件中。

因此，我從代碼沙箱中稍微更改了您的代碼，並使用 React State Hooks 來實現您的功能。 查看代碼示例： Code Sandbox Demo

希望這就是你要找的。 和平

Answer 2

我假設您將 json 作為組件的道具。您需要調用 renderParent function 來處理包括子數組在內的完整 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 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

檢查一下...您需要在父點擊時保存當前父子，我保存在 state 中，然后只顯示那個子，這里是代碼沙箱鏈接： 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>
  );
}