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 {
           // &#20351;&#29992; _schema &#20026;&#20102;&#20351;&#20302;&#20195;&#30721;&#32452;&#20214;&#22312;&#39029;&#38754;&#35774;&#35745;&#20013;&#20351;&#29992;&#21464;&#37327;&#65292;&#21516; react &#32452;&#20214;&#20351;&#29992;&#25928;&#26524;&#19968;&#33268;
           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);
 }
 
+/**
+ * &#21028;&#26029;&#26159;&#21542;&#26159;&#19968;&#20010;&#28151;&#21512;&#32452;&#20214;&#65292;&#21363; components &#26159;&#19968;&#20010;&#23545;&#35937;&#65292;&#23545;&#35937;&#20540;&#26159; React &#32452;&#20214;
+ * &#31034;&#20363;&#65306;
+ * {
+ *    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) {
