From d2d44e656e4515402c054ebd3c8029f759fe0777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E7=A6=85?= <mark.ck@alibaba-inc.com>
Date: Tue, 13 Oct 2020 14:17:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20FunctionComponent?=
 =?UTF-8?q?=20=E9=80=89=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/utils/src/build-components.ts | 15 ++++++++-------
 packages/utils/src/is-react.ts         |  4 ++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/utils/src/build-components.ts b/packages/utils/src/build-components.ts
index 434ba94c8..00d6e6b86 100644
--- a/packages/utils/src/build-components.ts
+++ b/packages/utils/src/build-components.ts
@@ -1,6 +1,6 @@
-import { ComponentType, forwardRef, createElement } from 'react';
+import { ComponentType, forwardRef, createElement, FunctionComponent } from 'react';
 import { NpmInfo } from '@ali/lowcode-types';
-import { isReactComponent } from './is-react';
+import { isReactComponent, acceptsRef, wrapReactClass } from './is-react';
 import { isESModule } from './is-es-module';
 
 interface LibraryMap {
@@ -80,13 +80,14 @@ export function buildComponents(libraryMap: LibraryMap, componentsMap: { [compon
   };
   Object.keys(componentsMap).forEach((componentName) => {
     let component = componentsMap[componentName];
-    if (isReactComponent(component)) {
-      components[componentName] = component;
-    } else {
+    if (!isReactComponent(component)) {
       component = findComponent(libraryMap, componentName, component);
-      if (component) {
-        components[componentName] = component;
+    }
+    if (component) {
+      if (!acceptsRef(component)) {
+        component = wrapReactClass(component as FunctionComponent);
       }
+      components[componentName] = component;
     }
   });
   return components;
diff --git a/packages/utils/src/is-react.ts b/packages/utils/src/is-react.ts
index 3b929edea..7261b6a07 100644
--- a/packages/utils/src/is-react.ts
+++ b/packages/utils/src/is-react.ts
@@ -1,4 +1,4 @@
-import { ComponentClass, Component, FunctionComponent, ComponentType } from 'react';
+import { ComponentClass, Component, FunctionComponent, ComponentType, createElement } from 'react';
 
 const hasSymbol = typeof Symbol === 'function' && Symbol.for;
 const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
@@ -22,7 +22,7 @@ export function isReactComponent(obj: any): obj is ComponentType<any> {
 export function wrapReactClass(view: FunctionComponent) {
   const ViewComponentClass = class extends Component {
     render() {
-      return view(this.props);
+      return createElement(view, this.props);
     }
   } as any;
   ViewComponentClass.displayName = view.displayName;