组件如何渲染到页面中

nocobase 主要通过 Fomily 来渲染 antd 的组件

通过use方法在Application.tsx注入组件

this.use(AntdSchemaComponentProvider);

AntdSchemaComponentProvider将antd组件写入到context中传下去。核心代码如下：

import * as components from '.';

export const AntdSchemaComponentProvider = (props) => {
  const { children } = props;
  return (
    <SchemaComponentOptions
      scope={{ requestChartData, useFilterActionProps }}
      components={{ ...components, ...common } as any}
    >
      {children}
    </SchemaComponentOptions>
  );
};

export const SchemaComponentOptions = (props) => {
  return (
    <SchemaOptionsContext.Provider value={{ scope, components }}>
      <SchemaExpressionScopeContext.Provider value={scope}>{props.children}</SchemaExpressionScopeContext.Provider>
    </SchemaOptionsContext.Provider>
  );
};

上面的components就是从/packages/core/client/src/schema-component/antd文件夹中获取的，export了所有依据antd封装的组件。

然后组件通过RecursionSchemaComponent进行渲染，RecursionSchemaComponent基于fomily的RecursionField进行渲染。

import {
  IRecursionFieldProps,
  ISchemaFieldProps,
  RecursionField,
  Schema,
} from '@formily/react';
const RecursionSchemaComponent = (props: ISchemaFieldProps) => {
  const { components, scope, schema, ...others } = props;

  return (
    <SchemaComponentOptions inherit components={components} scope={scope}>
      <RecursionField {...others} schema={toSchema(schema)} />
    </SchemaComponentOptions>
  );
};

传入的schema结构

{
    "type": "void",
    "x-component": "Menu",
    "x-designer": "Menu.Designer",
    "x-initializer": "MenuItemInitializers",
    "x-component-props": {
        "mode": "mix",
        "theme": "dark",
        "onSelect": "{{ onSelect }}",
        "sideMenuRefScopeKey": "sideMenuRef"
    },
    "properties": {
        "chchefqmry8": {
            "x-uid": "t4mybx9qxog",
            "_isJSONSchemaObject": true,
            "version": "2.0",
            "type": "void",
            "title": "page1",
            "x-component": "Menu.SubMenu",
            "x-decorator": "ACLMenuItemProvider",
            "x-component-props": {},
            "x-server-hooks": [
                {
                    "type": "onSelfCreate",
                    "method": "bindMenuToRole"
                }
            ],
            "x-async": false,
            "x-index": 3
        }
    },
    "name": "cjdnulm3zkh",
    "x-uid": "6zhanmp5sn2",
    "x-async": false
}