Merge pull request #983 from 7770824/7770824/fix-issue-964

fix: fix issue#964

Author: dntzhang

packages/omi-reactify/src/demo/index.tsx

@@ -1,9 +1,11 @@
 import '../../dist/omi-component.es.js';
+import './omi-tree';
 import React, { useEffect, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import reactify from '../index';
 
 const OmiReactComponent = reactify('omi-component-demo') as any;
+const OmiTree = reactify('omi-tree') as any;
 
 class ClassComponent extends React.Component<any, any> {
   constructor(props) {
@@ -13,7 +15,7 @@ class ClassComponent extends React.Component<any, any> {
     };
   }
 
-  ref = null;
+  ref: HTMLHeadingElement | null = null;
 
   componentDidMount(): void {
     console.log('componentDidMount', this.ref);
@@ -79,21 +81,51 @@ const App = (): any => {
     console.log('ref', ref.current)
   }, [])
   console.log('=====App render=====');
-  return <div>
-    <OmiReactComponent
-      show={true}
-      label='React Component'
-      complex={complex}
-      ref={ref}
-      camelCase="camelCase"
-      style={{ color: 'red' }}
-      onMockClick={(_e: React.MouseEvent) => { setComplex({ name: 'Omi' }) }}
-      renderFunction={MockComponent}
-    >
-      <span className='content'>content</span>
-    </OmiReactComponent>
-    <button className='content' onClick={btnClick}>change name</button>
-  </div>
+  const [treeData] = useState([
+    {
+      name: 'Root',
+      children: [
+        { name: 'Child 1' },
+        { 
+          name: 'Child 2',
+          children: [
+            { name: 'Grandchild 1' },
+            { name: 'Grandchild 2' }
+          ]
+        }
+      ]
+    }
+  ]);
+
+  const handleNodeClick = (e: CustomEvent) => {
+    console.log('Node clicked:', e.detail);
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <OmiReactComponent
+        show={true}
+        label='React Component'
+        complex={complex}
+        ref={ref}
+        camelCase="camelCase"
+        style={{ color: 'red' }}
+        onMockClick={(_e: React.MouseEvent) => { setComplex({ name: 'Omi' }) }}
+        renderFunction={MockComponent}
+      >
+        <span className='content'>content</span>
+      </OmiReactComponent>
+      <button className='content' onClick={btnClick}>change name</button>
+      
+      <div style={{ marginTop: '20px', padding: '20px', border: '1px solid #eee', borderRadius: '4px' }}>
+        <h2>Tree Demo</h2>
+        <OmiTree 
+          nodes={treeData} 
+          onNodeClick={handleNodeClick}
+        />
+      </div>
+    </div>
+  )
 }
 
-createRoot(document.getElementById('app')!).render(<App /> as any);
+createRoot(document.getElementById('app')!).render(<App />);

packages/omi-reactify/src/demo/omi-tree.tsx

@@ -0,0 +1,68 @@
+import { Component, tag, h } from 'omi'
+
+interface TreeNode {
+  name: string
+  children?: TreeNode[]
+}
+
+interface TreeProps {
+  nodes: TreeNode[]
+}
+
+@tag('omi-tree')
+export default class OmiTree extends Component<TreeProps> {
+  static css = `
+    .tree-node {
+      padding-left: 20px;
+      margin: 5px 0;
+    }
+    .tree-node-title {
+      cursor: pointer;
+      padding: 2px 5px;
+      border-radius: 3px;
+    }
+    .tree-node-title:hover {
+      background: #f0f0f0;
+    }
+  `
+
+  static propTypes = {
+    nodes: Array
+  }
+
+  static defaultProps = {
+    nodes: []
+  }
+
+  render() {
+    const { nodes = [] } = this.props
+    
+    console.log('OmiTree render, props:', this.props);
+    console.log('OmiTree render, nodes:', nodes);
+    console.log('OmiTree render, nodes type:', typeof nodes);
+    console.log('OmiTree render, nodes isArray:', Array.isArray(nodes));
+
+    const renderNode = (node: TreeNode, index: number) => (
+      h('div', { className: 'tree-node', key: index }, [
+        h('div', { 
+          className: 'tree-node-title', 
+          onClick: () => this.fire('nodeClick', node) 
+        }, node.name),
+        ...(node.children ? node.children.map((child, childIndex) => renderNode(child, childIndex)) : [])
+      ])
+    )
+
+    if (!Array.isArray(nodes) || nodes.length === 0) {
+      return (
+        h('div', {}, [
+          h('p', {}, 'No nodes to display'),
+          h('p', {}, `Debug: nodes = ${JSON.stringify(nodes)}`)
+        ])
+      )
+    }
+
+    return (
+      h('div', {}, nodes.map((node, index) => renderNode(node, index)))
+    )
+  }
+}