在 React JS 中使用 JSON 数据进行转换的最佳方法是什么？

Question

I have React TreeView right now I'm using as static but now I want to use this with JSON format how can I done this?

My Code:-

ratHelper.js

 const getData = () => { return [ { "tree": { "content": "main", "type": "L1", "tree": [ { "content": "subtree with children", "type": "L2", }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" }, { "content": "hello", "type": "L2" } ] } } ] } export default {getData}

 import React from "react"; import Tree from "react-animated-tree"; import "./rat.css"; import helper from "./ratHelper"; const treeStyles = { position: "absolute", top: 40, left: 40, color: "white", fill: "white", width: "100%", height: "100vh", overflow: "auto", }; const typeStyles = { fontSize: "5em", verticalAlign: "middle", }; const data = helper.getData(); console.log(data); const ReactAnimatedTree = () => ( <> {/* {data.map((p)=>{ <Tree>{p}</Tree> })} */} <Tree content="main" type="L1" canHide open style={treeStyles}> <Tree content="subtree with children" type="L2"> <Tree content="sub-subtree with children" type="L3"> <Tree content="child 1" type="L4"> <Tree content="child 1" type="L5"> <Tree content="child 1" type="L6"> <Tree content="child 1" type="L7"> <Tree content="child 1" type="L8"> <Tree content="child 1" type="L9"> <Tree content="child 1" type="L10"> <Tree content="child 1" type="L11"> <Tree content="child 1" type="L12"> <Tree content="child 1" type="L13"> <Tree content="child 1" type="L14"> <Tree content="child 1" type="L15"> <Tree content="child 1" type="L16"> <Tree content="child 1" type="L17"> <Tree content="child 1" type="L18"> <Tree content="child 1" type="L19"> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> <Tree content="child 1" type="L20" /> </Tree> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> <Tree content="child 1" type="L19" /> </Tree> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> <Tree content="child 1" type="L18" /> </Tree> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> <Tree content="child 1" type="L17" /> </Tree> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> <Tree content="child 1" type="L16" /> </Tree> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> <Tree content="child 1" type="L15" /> </Tree> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> <Tree content="child 1" type="L14" /> </Tree> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> <Tree content="child 1" type="L13" /> </Tree> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> <Tree content="child 1" type="L12" /> </Tree> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> <Tree content="child 1" type="L11" /> </Tree> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> <Tree content="child 1" type="L10" /> </Tree> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> <Tree content="hello" type="L9" /> </Tree> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> <Tree content="hello" type="L8" /> </Tree> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> <Tree content="hello" type="L7" /> </Tree> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> <Tree content="hello" type="L6" /> </Tree> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> <Tree content="hello" type="L5" /> </Tree> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> <Tree content="hello" type="L4" /> </Tree> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> <Tree content="hello" type="L3" /> </Tree> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> <Tree content="hello" type="L2" /> {/* <Tree content="hello" canHide /> */} </Tree> </> ); export default ReactAnimatedTree;

Thanks for your efforts!

Answer 1

I think you want to know how to map the JSON data in react. Here is how. This is your JSON format. I re-wrote it, so you won't mistake the data structure. It should be array.

const data = [
    {
      tree: {
        content: "main",
        type: "L1",
        tree: [
          {
            content: "subtree with children",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
          {
            content: "hello",
            type: "L2",
          },
        ],
      },
    },
  ];

export default data;

<div>
    {data.map((tree,index)=> (
        <Tree type={tree?.type} key={index} content={tree?.content}>
            {tree?.tree.map((subTree,index)=> (
                <Tree type={subTree?.type} key={index} content={subTree?.content}>
                    // you can continue map more subSubTree
                </Tree>
            ))}
        </Tree>
    ))}
</div>