终于搞定了子组件，可实现官方示例那样，在折叠面板中插入其它组件

[scil]

建立组件或子组件的不同方式

1. 通过 LoadTemplate，可在编辑区里生成诸如”插入新图片“这样的按钮
2. 要通过拖动建立子组件，参考 useDropTemplate
3. 在父组件中通过 new TreeNode 手动建立。我弄了个函数:

export const makeChildNode = ( designer: Engine,parent: TreeNode, type:string, props?: any): TreeNode => {
    const childTreeNode = new TreeNode({
        componentName: 'Field',
        props: {
            type: 'void',
            'x-component': type,
            'x-component-props': props
        },
    })
    props[designer.props.nodeIdAttrName] = childTreeNode.id
    parent.append(childTreeNode)
    return childTreeNode
}

// 使用，假设子组件为 WorldMap
    const childWorldmap = parseChildren(node, 'WorldMap')[0]


                        {childWorldmap &&

                            <TreeNodeContext.Provider value={childWorldmap}>
                                <WorldMap
                                    {
                                        ...{[designer.props.nodeIdAttrName]: childWorldmap['id']}
                                    }
                                    {
                                        ...childWorldmap.props['x-component-props'] || {}
                                    }
                                />
                            </TreeNodeContext.Provider>
                        }

要点：

1. 任何组件，都要在 ComponentTreeWidget 中注册，参考官方的 main.tsx。开始我的子组件可正常插入和渲染，但选中后，右侧设置区为空，后来经过注册，解决了问题。
2. 任何组件，都要带上 designer.props.nodeIdAttrName，否则在编辑区，鼠标无法选中这个组件(下面有更全面说明）
3. 渲染子组件，参考 formily/antd/src/components/FormCollapse/preview.tsx 中的 parseCollapse
4. 如果更改了props没重新渲染，就用 observer 包裹组件

编辑区里，如果子组件渲染了，但无法选中（也就无法进行设置），可能原因是

• 属性 designer.props.nodeIdAttrName （默认为 data-designer-node-id ）的原因：
  • 看渲染出来的html中，是否有这个属性，属性的值是否正确
  • 如果这个属性的值不正确，一般是错误地渲染为父节点的 node-id，那渲染子节点时，使用了useNodeIdProps()，但没有给子节点包裹上 TreeNodeContext.Provider
• 特定情境下是css方面的问题 如z-index等

其它

具体细节，搜索几个源码就明白了，以上是我摸了些源码再加上实践总结的，请多多赐教。

另外，在 schema 结构上，子组件，是父组件属性 properties 的成员。 schema中，可直接传递这样的父子结构，供设计器使用。看源码中的 ActionsWidget，加载 localStorage中存储的schema，所以更改一下，就可加载自己其它地方的 schema。

[scil]

示例，在组件内部插入“文本”（官方内置的 Text 组件）

建立“添加文本”的按钮

                        <LoadTemplate
                                        actions={[
                                            {
                                                title: "添加文本",
                                                icon: 'AddPanel',
                                                onClick: () => {
                                                    const badge = new TreeNode({
                                                        componentName: 'Field',
                                                        props: {
                                                            type: 'void',
                                                            'x-component': 'Text',
                                                            'x-component-props': {
                                                                content: `new text haha`,
                                                            },
                                                        },
                                                    })
                                                    node.append(badge)
                                                },
                                            },
                                        ]}
                                    />

渲染文本

const parseChildren = (parent: TreeNode, componentType:string) => {
    const tabs: TreeNode[] = []
    parent.children.forEach((node) => {
        if (matchComponent(node, componentType)) {
            tabs.push(node)
        }
    })
    return tabs
}

        const texts = parseChildren(node, 'Text')

        const renderText = () => {
            console.log('[builder] renderText')
            if (!node.children?.length) return null
            return (
                <>
                    {texts.map((pic) => {
                        const props = pic.props['x-component-props'] || {}

                            
                         props[designer.props.nodeIdAttrName]= pic.id
                        console.log('[builder] renderText %o', props)
                        return (
                            <Text 
                                {...props}
                                key={pic.id}
                            >
                                in text
                            </Text>
                        )
                    })}
                </>
            )
        }