fix: fix low-code component rendering problems: 1. thisRequiredInJSE does not take effect 2. jsx components cannot obtain source components

liujuping · JackLian · commit 5dd462544fbb · 2022-06-29T17:17:54.000+08:00
diff --git a/packages/rax-simulator-renderer/src/renderer.ts b/packages/rax-simulator-renderer/src/renderer.ts
@@ -523,10 +523,11 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
           ...extraProps,
           schema: _schema,
           components,
-          designMode: renderer.designMode,
+          designMode: '',
           device: renderer.device,
           appHelper: renderer.context,
           rendererName: 'LowCodeRenderer',
+          thisRequiredInJSE: host.thisRequiredInJSE,
           customCreateElement: (Comp: any, props: any, children: any) => {
             const componentMeta = host.currentDocument?.getComponentMeta(Comp.displayName);
             if (componentMeta?.isModal) {
diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts
@@ -450,10 +450,11 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
           // 使用 _schema 为了使低代码组件在页面设计中使用变量，同 react 组件使用效果一致
           schema: _schema,
           components: renderer.components,
-          designMode: renderer.designMode,
+          designMode: '',
           device: renderer.device,
           appHelper: renderer.context,
           rendererName: 'LowCodeRenderer',
+          thisRequiredInJSE: host.thisRequiredInJSE,
           customCreateElement: (Comp: any, props: any, children: any) => {
             const componentMeta = host.currentDocument?.getComponentMeta(Comp.displayName);
             if (componentMeta?.isModal) {
diff --git a/packages/renderer-core/src/renderer/base.tsx b/packages/renderer-core/src/renderer/base.tsx
@@ -116,7 +116,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
       if (func) {
         if (isJSExpression(func) || isJSFunction(func)) {
           const fn = props.thisRequiredInJSE ? parseThisRequiredExpression(func, this) : parseExpression(func, this);
-          return fn(props, state);
+          return fn?.(props, state);
         }
 
         if (typeof func === 'function') {
@@ -210,6 +210,14 @@ export default function baseRendererFactory(): IBaseRenderComponent {
       }
     };
 
+    _getComponentView = (componentName: string) => {
+      const { __components } = this.props;
+      if (!__components) {
+        return;
+      }
+      return __components[componentName];
+    };
+
     __bindCustomMethods = (props = this.props) => {
       const { __schema } = props;
       const customMethodsList = Object.keys(__schema.methods || {}) || [];
diff --git a/packages/utils/src/build-components.ts b/packages/utils/src/build-components.ts
@@ -3,6 +3,7 @@ import { NpmInfo, ComponentSchema } from '@alilc/lowcode-types';
 import { Component } from '@alilc/lowcode-designer';
 import { isESModule } from './is-es-module';
 import { isReactComponent, acceptsRef, wrapReactClass } from './is-react';
+import { isObject } from './is-object';
 
 interface LibraryMap {
   [key: string]: string;
@@ -76,6 +77,22 @@ function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmI
   return getSubComponent(library, paths);
 }
 
+/**
+ * 判断是否是一个混合组件，即 components 是一个对象，对象值是 React 组件
+ * 示例：
+ * {
+ *    Button: ReactNode,
+ *    Text: ReactNode,
+ * }
+ */
+function isMixinComponent(components: any) {
+  if (!isObject(components)) {
+    return false;
+  }
+
+  return Object.keys(components).some(componentName => isReactComponent(components[componentName]));
+}
+
 export function buildComponents(libraryMap: LibraryMap,
   componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> | ComponentSchema },
   createComponent: (schema: ComponentSchema) => Component | null) {
@@ -89,6 +106,8 @@ export function buildComponents(libraryMap: LibraryMap,
         component = wrapReactClass(component as FunctionComponent);
       }
       components[componentName] = component;
+    } else if (isMixinComponent(component)) {
+      components[componentName] = component;
     } else {
       component = findComponent(libraryMap, componentName, component);
       if (component) {
