Update App.js

knmanage/src/App.js

@@ -1,31 +1,123 @@
 import logo from './logo.svg';
 import './App.css';
 import init, { greet } from "knmodel";
-import React, { useEffect } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
+
+
+var d = {
+  field: '就诊卡号11',
+  required: 1,
+  chiled: [
+    {
+      field: '测试规则22',
+      required: 1,
+      chiled: [
+        {
+          field: '就诊卡号33',
+          required: 1,
+          chiled: [
+            {
+              field: '测试规则44',
+              required: 1,
+              chiled: [
+                {
+                  field: '就诊卡号',
+                  required: 1,
+                  chiled: [
+                    {
+                      field: '测试规则',
+                      required: 1,
+                      chiled: [
+                      ]
+                    }
+                  ],
+                }
+              ]
+            }
+          ],
+        }
+      ]
+    },
+    {
+      field: '测试规则22',
+      required: 1,
+      chiled: [
+        {
+          field: '就诊卡号33',
+          required: 1,
+          chiled: [
+            {
+              field: '测试规则44',
+              required: 1,
+              chiled: [
+                {
+                  field: '就诊卡号',
+                  required: 1,
+                  chiled: [
+                    {
+                      field: '测试规则',
+                      required: 1,
+                      chiled: [
+
+                      ]
+                    }
+                  ],
+                }
+              ]
+            }
+          ],
+        }
+      ]
+    }
+  ],
+};
 
 function App() {
+
+  const [data, setData] = useState(d);
+
   useEffect(() => {
     init().then(() => {
-      greet("Hello Tianya");
+      // greet("Hello Tianya");
     })
   }, [])
 
+  function TreeNode(props) {
+    console.log(props);
+    const [idHash, setIdHash] = useState(new Date().getTime() + Math.round(Math.random() * 10000))
+    const [nodeField, setNodeField] = useState(props.data.field)
+    const [nodeRequired, setNodeRequired] = useState(props.data.required)
+    const [nodeChiled, setNodeChiled] = useState(props.data.chiled)
+
+    // 这里只有子集变化了才更新
+    const listItems = useMemo(() => {
+      return nodeChiled.map((item) =>
+        <TreeNode data={item}></TreeNode>
+      )
+    }, [nodeChiled])
+
+    // 更新组件
+    function handleOnClick() {
+      if (nodeRequired == 0) {
+        setNodeRequired(1)
+      } else {
+        setNodeRequired(0)
+      }
+    }
+
+    return (
+      <div id={idHash} style={{ marginLeft: "30px" }}>
+        <h2>{nodeField}<a onClick={handleOnClick}>[{nodeRequired}]</a></h2>
+        <div>{listItems}</div>
+      </div>
+    );
+  }
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h1>Node</h1>
+      <hr></hr>
+      <TreeNode data={data}></TreeNode>
     </div>
   );
 }