如何使用JavaScript展示我的具有父子关系的数据？

huangapple
go评论112阅读模式
英文:

How can I show my data with a parent child relationship with javascript?

问题

Sure, here's the translated code part:

  1. const data = [
  2.     { id: 1, text: 'hello', parent: null },
  3.     { id: 2, text: 'hello2', parent: 1 },
  4.     { id: 3, text: 'hello3', parent: 2 },
  5.     { id: 4, text: 'where are u?', parent: null },
  6. ];
  8. function convertToTree(data: any) {
  9.     const tree: any = {};
  10.     data.forEach((item: any) => {
  11.         const parentId = item.parent;
  12.         if (!parentId) {
  13.             tree[item.id] = { ...item, children: [] };
  14.         } else {
  15.             if (!tree[parentId]) {
  16.                 tree[parentId] = { children: [] };
  17.             }
  18.             tree[parentId].children.push({ ...item, children: [] });
  19.         }
  20.     });
  21.     return tree;
  22. }
  24. function TreeNode({ data }: any) {
  25.     const [isVisible, setIsVisible] = useState(false);
  27.     const handleClick = () => {
  28.         setIsVisible(!isVisible);
  29.     };
  31.     return (
  32.         <div>
  33.             <p onClick={handleClick}>{data.text}</p>
  34.             {isVisible && data.children && data.children.length > 0 && (
  35.                 <ul>
  36.                     {data.children.map((child: any) => (
  37.                         <li key={child.id}>
  38.                             <TreeNode data={child} />
  39.                         </li>
  40.                     ))}
  41.                 </ul>
  42.             )}
  43.         </div>
  44.     );
  45. }

I hope this helps you with your JavaScript-React code! If you have any questions or need further assistance, please feel free to ask.

英文: 
  1. const data = [
  2. { id: 1, text: &#39;hello&#39;, parent: null },
  3. { id: 2, text: &#39;hello2&#39;, parent: 1 },
  4. { id: 3, text: &#39;hello3&#39;, parent: 2 },
  5. { id: 4, text: &#39;where are u?&#39;, parent: null },
  6. ];
  1.   function convertToTree(data: any) {
  2. const tree: any = {};
  3. data.forEach((item: any) =&gt; {
  4. const parentId = item.parent;
  5. if (!parentId) {
  6. tree[item.id] = { ...item, children: [] };
  7. } else {
  8. if (!tree[parentId]) {
  9. tree[parentId] = { children: [] };
  10. }
  11. tree[parentId].children.push({ ...item, children: [] });
  12. }
  13. });
  14. return tree;
  15. }
  16. function TreeNode({ data }: any) {
  17. const [isVisible, setIsVisible] = useState(false);
  18. const handleClick = () =&gt; {
  19. setIsVisible(!isVisible);
  20. };
  21. return (
  22. &lt;div&gt;
  23. &lt;p onClick={handleClick}&gt;{data.text}&lt;/p&gt;
  24. {isVisible &amp;&amp; data.children &amp;&amp; data.children.length &gt; 0 &amp;&amp; (
  25. &lt;ul&gt;
  26. {data.children.map((child: any) =&gt; (
  27. &lt;li key={child.id}&gt;
  28. &lt;TreeNode data={child} /&gt;
  29. &lt;/li&gt;
  30. ))}
  31. &lt;/ul&gt;
  32. )}
  33. &lt;/div&gt;
  34. );
  35. }

I want to show this data as perent-child depending on the parent data in the data using javascript-react.
rule1- when I click on the parent data I want to see the child data.
rule2- since every child can also be a parent, if a child has child data, I want to access its own child data when I click on the child.

But in the code I wrote, only when I click on the parent data, only the children come. As it appears in the data, the child data also has childi, but I cannot see them.

thank you for your help

答案1

得分: 1

这是我现在有的，基本上是将节点递归添加到树中然后打印出来的方法：

  1. class TodoApp extends React.Component {
  2.   constructor(props) {
  3.     super(props)
  4.     this.state = {
  5.       items: [
  6.         { id: 1, text: 'hello', parent: null },
  7.         { id: 2, text: 'hello2', parent: 1 },
  8.         { id: 3, text: 'hello3', parent: 2 },
  9.         { id: 4, text: 'where are u?', parent: null },
  10.       ]
  11.     }
  12.   }
  13.   
  14.   transformToTree(data) {
  15.     const tree = {};
  16.     
  17.     // 具有父节点但不在树中的元素
  18.     const invisibleParents = {};
  19.     for(let node of data.items) {
  20.       if (!node.parent) {
  21.         // 树的第一个节点
  22.         tree[node.id] = { ...node, children: [] };
  23.         
  24.         if (node.id in invisibleParents) {
  25.           tree[node.id].children.push(...invisibleParents[node.id]);
  26.           delete invisibleParents[node.id];
  27.         }
  28.         
  29.         continue;
  30.       }
  31.       
  32.       if (node.parent in tree) {
  33.         // 直接添加
  34.         tree[node.parent].children.push(node);
  35.       } else {
  36.         if (node.parent in invisibleParents)
  37.           invisibleParents[node.parent].push(node);
  38.         else
  39.           invisibleParents[node.parent] = [node];
  40.       }
  41.     }
  42.     
  43.     return tree;
  44.   }
  45.   
  46.   render() {
  47.     const treeData = this.transformToTree(this.state);
  48.     return (
  49.       treeData.map(x => 
  50.       {
  51.         return (<SmallComponent item={x} />)
  52.       })
  53.     )
  54.   }
  55. }
  57. class SmallComponent extends React.Component {
  58.   constructor(props) {
  59.     super(props);
  60.     this.state = { ...props };
  61.   }
  62.   
  63.   render() {
  64.     const item = this.state.item;
  65.     return (
  66.       <div>
  67.         <p>
  68.           {item.text}
  69.           {item.children.length &&
  70.             <ul>
  71.               <li>
  72.                 {item.children.map(x => 
  73.                 (
  74.                   <SmallComponent item={x} />
  75.                 ))}
  76.               </li>
  77.             </ul>}
  78.         </p>
  79.       </div>
  80.     )
  81.   }
  82. }
  84. ReactDOM.render(<TodoApp />, document.querySelector("#app"))
英文:

This is what I have, basically your method of recursively adding nodes to the trees and then printing it

  1. class TodoApp extends React.Component {
  2.   constructor(props) {
  3.     super(props)
  4.     this.state = {
  5.     	items: [
  6.     { id: 1, text: &#39;hello&#39;, parent: null },
  7.     { id: 2, text: &#39;hello2&#39;, parent: 1 },
  8.     { id: 3, text: &#39;hello3&#39;, parent: 2 },
  9.     { id: 4, text: &#39;where are u?&#39;, parent: null },
  10.       ]
  11.     }
  12.   }
  13.   
  14.   transformToTree(data) {
  15.   	const tree = {};
  16.     
  17.     //elems that have a parent but not in tree
  18.     const invisibleParents = {};
  19.     for(let node in data.items)
  20.     {
  21.     	if (!node.parent)
  22.       {
  23.       	//first node of tree
  24.       	tree[node.id] = {...node, children: []};
  25.         
  26.         if (node.id in invisibleParents)
  27.         {
  28.         	tree[node.id].children.push(...invisibleParents[node.id]);
  29.         	delete invisibleParents[node.id];
  30.         }
  31.         
  32.         continue;
  33.       }
  34.       
  35.       if (node.parent in tree)
  36.       {
  37.       	//directly add
  38.         tree[node.parent].children.push(node);
  39.       }
  40.       else
  41.       {
  42.       	if (node.parent in invisibleParents)
  43.         	invisibleParents[node.parent].push(node);
  44.         else
  45.         	invisibleParents[node.parent] = [node];
  46.       }
  47.     }
  48.     
  49.     return tree;
  50.   }
  51.   
  52.   render() {
  53.   const treeData = transformData(this.state.data);
  54.     return (
  55.         treeData.map(x =&gt; 
  56.         {
  57.         	return (&lt;SmallComponent item={x} /&gt;)
  58.         })
  59.     )
  60.   }
  61. }
  63. class SmallComponent extends React.Component
  64. {
  65.   constructor(props)
  66.   {
  67.   	super(props);
  68.     this.state = {...props};
  69.   }
  70.   
  71. 	render() {
  72.   item = this.state.item;
  73.   return (
  74.   &lt;div&gt;
  75.   	  &lt;p&gt;
  76.   	    {item.text}
  77.         {item.children.length &amp;&amp; 
  78.         &lt;ul&gt;
  79.           &lt;li&gt;
  80.             {item.children.map(x =&gt; 
  81.             (
  82.             	&lt;SmallComponent item={x} /&gt;
  83.             ))}
  84.           &lt;/li&gt;  
  85.         &lt;/ul&gt;}
  86.   	  &lt;/p&gt;
  87.   	&lt;/div&gt;
  88.     )
  89.   }
  90. }
  92. ReactDOM.render(&lt;TodoApp /&gt;, document.querySelector(&quot;#app&quot;))

huangapple
  • 本文由 发表于 2023年7月4日 20:54:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/76612873.html
  • javascript
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定