低代码引擎中 React 动态渲染器：JSON Schema 转 Fiber 树详解

低代码引擎中 React 动态渲染器：JSON Schema 转 Fiber 树详解 | 极客日志

{
  "type": "object",
  "name": "userForm",
  "title": "用户信息",
  "properties": {
    "username": {
      "type": "string",
      "title": "用户名",
      "description": "请输入用户的姓名",
      "widget": "Input",
      "placeholder": "张三",
      "readOnly": false,
      "rules": ["required", {"pattern": "^[a-zA-Z0-9]{3,16}$", "message": "3-16 位字母数字"}],
      "layout": { "span": 12 }
    },
    "age": {
      "type": "number",
      "title": "年龄",
      "widget": "InputNumber",
      "min": 0,
      "max": 120,
      "default": 18,
      "visible": "{{ formData.username !== '' }}"
    },
    "gender": {
      "type": "string",
      "title": "性别",
      "widget": "Select",
      "options": [
        {"label": "男", "value": "male"},
        {"label": "女", "value": "female"}
      ],
      "default": "male"
    },
    "interests": {
      "type": "array",
      "title": "兴趣爱好",
      "widget": "CheckboxGroup",
      "items": { "type": "string" },
      "options": [
        {"label": "编程", "value": "coding"},
        {"label": "阅读", "value": "reading"},
        {"label": "运动", "value": "sport"}
      ]
    }
  },
  "actions": [
    {
      "type": "button",
      "text": "提交",
      "onClick": "function() { console.log('表单数据:', formData); alert('提交成功!'); }",
      "props": { "type": "primary" }
    }
  ]
}

// src/components/registry.ts
import React from 'react';
import { Input, Select, InputNumber, Checkbox, CheckboxGroup, Button } from 'antd';

// 假设使用 Ant Design
// 我们可以自定义一个通用表单项包裹器
const FormItemWrapper: React.FC<{ title?: string; description?: string; children: React.ReactNode }> = ({ title, description, children }) => (
  <div style={{ marginBottom: 16 }}>
    {title && <label style={{ display: 'block', fontWeight: 'bold' }}>{title}</label>}
    {description && <small style={{ display: 'block', color: '#888' }}>{description}</small>}
    {children}
  </div>
);

// 核心组件注册表
export const componentRegistry = new Map<string, React.ComponentType<any>>();
componentRegistry.set('Input', Input);
componentRegistry.set('InputNumber', InputNumber);
componentRegistry.set('Select', Select);
componentRegistry.set('Checkbox', Checkbox);
componentRegistry.set('CheckboxGroup', CheckboxGroup);
componentRegistry.set('Button', Button);
componentRegistry.set('FormItemWrapper', FormItemWrapper);

// src/renderer/renderSchemaNode.tsx
import React from 'react';
import { componentRegistry } from '../components/registry';
import { evaluateExpression } from './expressionEngine';

// 定义 Schema 节点类型（简化版）
export interface SchemaNode {
  type: string;
  widget?: string;
  title?: string;
  description?: string;
  properties?: { [key: string]: SchemaNode };
  items?: SchemaNode;
  options?: Array<{ label: string; value: any }>;
  default?: any;
  visible?: string;
  readOnly?: boolean | string;
  [key: string]: any;
}

// 渲染器的配置和上下文
export interface RenderConfig {
  formData: { [key: string]: any };
  onDataChange: (path: string, value: any) => void;
  pathPrefix: string;
}

// 核心递归渲染函数
export const renderSchemaNode = ( schemaNode: SchemaNode, config: RenderConfig ): React.ReactNode => {
  const { formData, onDataChange, pathPrefix } = config;

  // 1. 处理动态属性：可见性、只读等
  const isVisible = schemaNode.visible ? evaluateExpression(schemaNode.visible, { formData }) : true;
  if (!isVisible) { return null; }
  const isReadOnly = schemaNode.readOnly ? evaluateExpression(schemaNode.readOnly, { formData }) : false;

  // 2. 根据 Schema 类型或 widget 选择组件
  let ComponentToRender: React.ComponentType<any> | undefined;
  let componentProps: { [key: string]: any } = { ...schemaNode };

  if (schemaNode.widget) {
    ComponentToRender = componentRegistry.get(schemaNode.widget);
    if (!ComponentToRender) {
      console.warn(`Widget "${schemaNode.widget}" not found in registry.`);
      ComponentToRender = () => <div>Unknown Widget: {schemaNode.widget}</div>;
    }
  } else {
    switch (schemaNode.type) {
      case 'string': ComponentToRender = componentRegistry.get('Input'); break;
      case 'number': ComponentToRender = componentRegistry.get('InputNumber'); break;
      case 'boolean': ComponentToRender = componentRegistry.get('Checkbox'); break;
      case 'object': ComponentToRender = ({ children }) => <div style={{ border: '1px solid #eee', padding: 10 }}>{children}</div>; break;
      case 'array': ComponentToRender = ({ children }) => <div>{children}</div>; break;
      default: ComponentToRender = () => <div>Unsupported Type: {schemaNode.type}</div>;
    }
  }

  if (!ComponentToRender) { return null; }

  // 3. 递归处理子节点
  let children: React.ReactNode = null;
  if (schemaNode.type === 'object' && schemaNode.properties) {
    children = Object.keys(schemaNode.properties).map((key) => {
      const propSchema = schemaNode.properties![key];
      const currentPath = pathPrefix ? `${pathPrefix}.${key}` : key;
      return (
        <React.Fragment key={key}>
          {renderSchemaNode(propSchema, { ...config, pathPrefix: currentPath })}
        </React.Fragment>
      );
    });
  } else if (schemaNode.type === 'array' && schemaNode.items) {
    const arrayData = (formData[pathPrefix] || []) as any[];
    children = arrayData.map((itemValue, index) => {
      const currentPath = `${pathPrefix}[${index}]`;
      return (
        <React.Fragment key={index}>
          {renderSchemaNode(schemaNode.items!, { ...config, pathPrefix: currentPath, formData: { ...formData, [pathPrefix]: itemValue } })}
        </React.Fragment>
      );
    });
  } else if (schemaNode.widget === 'Button') {
    children = schemaNode.text || 'Button';
  }

  // 4. 数据绑定 (value 和 onChange)
  if (['Input', 'InputNumber', 'Select', 'Checkbox', 'CheckboxGroup'].includes(schemaNode.widget || schemaNode.type)) {
    const currentPathValue = pathPrefix ? getPathValue(formData, pathPrefix) : undefined;
    componentProps.value = currentPathValue === undefined ? schemaNode.default : currentPathValue;
    componentProps.onChange = (e: any) => {
      let newValue = e && typeof e === 'object' && 'target' in e ? e.target.value : e;
      if (schemaNode.widget === 'CheckboxGroup' && Array.isArray(newValue)) { /* handle array */ }
      else if (schemaNode.type === 'number') { newValue = parseFloat(newValue); if (isNaN(newValue)) newValue = undefined; }
      onDataChange(pathPrefix, newValue);
    };
  }

  // 5. 事件绑定 (onClick 等)
  if (schemaNode.onClick) {
    componentProps.onClick = () => {
      try {
        const func = new Function('formData', schemaNode.onClick as string);
        func(formData);
      } catch (error) {
        console.error('Error executing onClick handler:', error);
      }
    };
  }

  // 6. 额外处理，如只读属性
  if (isReadOnly) {
    componentProps.readOnly = true;
    componentProps.disabled = true;
  }

  // 7. 使用 FormItemWrapper 包裹
  const WrappedComponent = componentRegistry.get('FormItemWrapper');
  if (WrappedComponent && (schemaNode.title || schemaNode.description) && schemaNode.type !== 'object' && schemaNode.type !== 'array' && schemaNode.widget !== 'Button') {
    return (
      <WrappedComponent title={schemaNode.title} description={schemaNode.description}>
        <ComponentToRender {...componentProps}>{children}</ComponentToRender>
      </WrappedComponent>
    );
  } else {
    return <ComponentToRender {...componentProps}>{children}</ComponentToRender>;
  }
};

function getPathValue(obj: any, path: string): any {
  if (!obj || !path) return undefined;
  return path.split('.').reduce((acc, part) => {
    const match = part.match(/(.*)[(d+)]/);
    if (match) {
      const arrayKey = match[1];
      const index = parseInt(match[2], 10);
      return acc && acc[arrayKey] ? acc[arrayKey][index] : undefined;
    }
    return acc ? acc[part] : undefined;
  }, obj);
}

// src/renderer/DynamicFormRenderer.tsx
import React, { useState, useCallback } from 'react';
import { renderSchemaNode, SchemaNode } from './renderSchemaNode';
import { setPathValue } from './utils';

interface DynamicFormRendererProps {
  schema: SchemaNode;
  initialData?: { [key: string]: any };
  onFormSubmit?: (data: { [key: string]: any }) => void;
}

export const DynamicFormRenderer: React.FC<DynamicFormRendererProps> = ({ schema, initialData = {}, onFormSubmit }) => {
  const [formData, setFormData] = useState<{ [key: string]: any }>(initialData);

  const handleDataChange = useCallback((path: string, value: any) => {
    setFormData((prevData) => {
      const newData = { ...prevData };
      setPathValue(newData, path, value);
      return newData;
    });
  }, []);

  const handleSubmit = useCallback(() => {
    if (onFormSubmit) { onFormSubmit(formData); }
  }, [formData, onFormSubmit]);

  const renderConfig = {
    formData,
    onDataChange: handleDataChange,
    pathPrefix: '',
  };

  return (
    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
      {renderSchemaNode(schema, renderConfig)}
      {!schema.actions?.some(action => action.type === 'button' && action.text === '提交') && (
        <button type="submit" style={{ marginTop: 20 }}>提交表单 (Fallback)</button>
      )}
    </form>
  );
};

// src/renderer/expressionEngine.ts
export const evaluateExpression = (expression: string, context: { [key: string]: any }): any => {
  try {
    const cleanedExpression = expression.startsWith('{{') && expression.endsWith('}}') ? expression.slice(2, -2).trim() : expression;
    const paramNames = Object.keys(context);
    const paramValues = Object.values(context);
    const dynamicFunction = new Function(...paramNames, `return ${cleanedExpression};`);
    return dynamicFunction(...paramValues);
  } catch (error) {
    console.error('Error evaluating expression:', expression, error);
    return undefined;
  }
};

export const registerCustomComponent = (name: string, Component: React.ComponentType<any>) => {
  if (componentRegistry.has(name)) { console.warn(`Component "${name}" already exists.`); }
  componentRegistry.set(name, Component);
};

{
  "type": "object",
  "name": "registrationForm",
  "title": "用户注册",
  "properties": {
    "username": {
      "type": "string",
      "title": "用户名",
      "widget": "Input",
      "placeholder": "请输入用户名",
      "rules": [{"required": true, "message": "用户名必填"}],
      "layout": {"span": 12}
    },
    "password": {
      "type": "string",
      "title": "密码",
      "widget": "Input.Password",
      "placeholder": "请输入密码",
      "rules": [{"required": true, "message": "密码必填"}],
      "layout": {"span": 12}
    },
    "confirmPassword": {
      "type": "string",
      "title": "确认密码",
      "widget": "Input.Password",
      "placeholder": "请再次输入密码",
      "rules": [{"required": true, "message": "请确认密码"}],
      "visible": "{{ formData.password && formData.password.length > 0 }}"
    },
    "role": {
      "type": "string",
      "title": "角色",
      "widget": "Select",
      "options": [
        {"label": "普通用户", "value": "user"},
        {"label": "管理员", "value": "admin"}
      ],
      "default": "user",
      "layout": {"span": 24}
    },
    "isAdmin": {
      "type": "boolean",
      "title": "是否管理员",
      "widget": "Checkbox",
      "visible": "{{ formData.role === 'admin' }}"
    },
    "permissions": {
      "type": "array",
      "title": "权限",
      "widget": "CheckboxGroup",
      "items": {"type": "string"},
      "options": [
        {"label": "读", "value": "read"},
        {"label": "写", "value": "write"}
      ],
      "visible": "{{ formData.isAdmin === true }}"
    }
  },
  "actions": [
    {
      "type": "button",
      "text": "注册",
      "props": {"type": "primary"},
      "onClick": "function(formData) { console.log('注册数据:', formData); alert('注册成功！'); }"
    }
  ]
}

Schema 属性/结构	对应的 React 元素/逻辑	关键点
`type: "object"`	一个 `<div>` 或 `<form>` 容器	递归渲染其 `properties`
`properties`	遍历每个属性，递归调用 `renderSchemaNode`	构建子组件树
`username`, `password`	`<FormItemWrapper><Input /></FormItemWrapper>`	`widget: "Input"` 映射，`value` 和 `onChange` 双向绑定
`confirmPassword`	`<FormItemWrapper><Input.Password /></FormItemWrapper>`	`visible` 表达式动态计算，决定是否渲染
`role`	`<FormItemWrapper><Select /></FormItemWrapper>`	`options` 属性直接传递给 `Select`
`isAdmin`	`<FormItemWrapper><Checkbox /></FormItemWrapper>`	`visible` 表达式动态控制渲染
`permissions`	`<FormItemWrapper><CheckboxGroup /></FormItemWrapper>`	`visible` 表达式动态控制渲染
`actions` (button)	`<Button type="primary" onClick={...}>注册</Button>`	`onClick` 属性执行沙箱中的 JavaScript 代码

低代码引擎中 React 动态渲染器：JSON Schema 转 Fiber 树详解

一、引言：低代码的崛起与动态渲染的挑战

二、低代码引擎的宏观架构视角

三、React Fiber 架构的精髓与动态渲染的契合点

四、JSON Schema：UI 描述的蓝图

五、从 JSON Schema 到 React 元素的转换核心机制

A. 组件注册表 (Component Registry)

B. 递归渲染器 (Recursive Renderer)

C. 属性映射与数据绑定 (Property Mapping & Data Binding)

D. 状态管理与数据流 (State Management & Data Flow)

E. 事件处理与行为定义 (Event Handling & Behavior Definition)

六、动态渲染器的进阶特性与挑战

A. 表达式引擎 (Expression Engine)

B. 布局系统集成 (Layout System Integration)

C. 自定义组件与扩展机制 (Custom Components & Extension)

D. 性能优化策略 (Performance Optimization Strategies)

E. 错误处理与调试 (Error Handling & Debugging)

F. 运行时与设计时的考量 (Runtime vs. Design-time Considerations)

七、真实场景案例分析：构建一个动态表单

八、未来展望：智能化与标准化

九、结语

更多推荐文章

相关免费在线工具

低代码引擎中 React 动态渲染器：JSON Schema 转 Fiber 树详解

一、引言：低代码的崛起与动态渲染的挑战

二、低代码引擎的宏观架构视角

三、React Fiber 架构的精髓与动态渲染的契合点

四、JSON Schema：UI 描述的蓝图

五、从 JSON Schema 到 React 元素的转换核心机制

A. 组件注册表 (Component Registry)

B. 递归渲染器 (Recursive Renderer)

C. 属性映射与数据绑定 (Property Mapping & Data Binding)

D. 状态管理与数据流 (State Management & Data Flow)

E. 事件处理与行为定义 (Event Handling & Behavior Definition)

六、动态渲染器的进阶特性与挑战

A. 表达式引擎 (Expression Engine)

B. 布局系统集成 (Layout System Integration)

C. 自定义组件与扩展机制 (Custom Components & Extension)

D. 性能优化策略 (Performance Optimization Strategies)

E. 错误处理与调试 (Error Handling & Debugging)

F. 运行时与设计时的考量 (Runtime vs. Design-time Considerations)

七、真实场景案例分析：构建一个动态表单

八、未来展望：智能化与标准化

九、结语

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具