diff --git a/packages/taro-components-react/src/components/button/index.tsx b/packages/taro-components-react/src/components/button/index.tsx
index 2d07c7d0da30..e96b3388b57a 100644
--- a/packages/taro-components-react/src/components/button/index.tsx
+++ b/packages/taro-components-react/src/components/button/index.tsx
@@ -3,7 +3,7 @@ import './style/index.scss'
 import classNames from 'classnames'
 import React from 'react'
 
-import { omit } from '../../utils'
+import { createForwardRefComponent, omit } from '../../utils'
 
 interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
   size?: string
@@ -15,6 +15,7 @@ interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'ty
   loading?: boolean
   type?: string
   className?: string
+  forwardedRef?: React.MutableRefObject<HTMLButtonElement>
 }
 
 interface IState {
@@ -54,6 +55,7 @@ class Button extends React.Component<IProps, IState> {
       hoverStayTime = 70,
       loading = false,
       type,
+      forwardedRef,
     } = this.props
     const cls = classNames(
       className,
@@ -96,8 +98,9 @@ class Button extends React.Component<IProps, IState> {
 
     return (
       <button
-        {...omit(this.props, ['hoverClass', 'onTouchStart', 'onTouchEnd', 'type', 'loading'])}
+        {...omit(this.props, ['hoverClass', 'onTouchStart', 'onTouchEnd', 'type', 'loading', 'forwardedRef'])}
         type={type}
+        ref={forwardedRef}
         className={cls}
         style={style}
         onClick={onClick}
@@ -114,4 +117,4 @@ class Button extends React.Component<IProps, IState> {
   }
 }
 
-export default Button
+export default createForwardRefComponent(Button)
diff --git a/packages/taro-components-react/src/components/icon/index.tsx b/packages/taro-components-react/src/components/icon/index.tsx
index b9ec44c7d1d7..ebff8a1475bf 100644
--- a/packages/taro-components-react/src/components/icon/index.tsx
+++ b/packages/taro-components-react/src/components/icon/index.tsx
@@ -3,7 +3,7 @@ import './style/index.scss'
 import classNames from 'classnames'
 import React from 'react'
 
-import { omit } from '../../utils'
+import { createForwardRefComponent, omit } from '../../utils'
 
 
 interface IProps {
@@ -11,10 +11,11 @@ interface IProps {
   color: string
   size?: number | string
   className?: string
+  forwardedRef?: React.MutableRefObject<HTMLLIElement>
 }
 
 const Icon = (props: IProps) => {
-  let { type, className = '', size = '23', color } = props
+  let { type, className = '', size = '23', color, forwardedRef } = props
   if (type) type = type.replace(/_/g, '-')
   const cls = classNames(
     {
@@ -25,7 +26,7 @@ const Icon = (props: IProps) => {
   const style = { 'font-size': size + 'px', color: color }
 
   return (
-    <i {...omit(props, ['type', 'className'])} className={cls} style={style} />
+    <i {...omit(props, ['type', 'className', 'forwardedRef'])} className={cls} style={style} ref={forwardedRef} />
   )
 }
-export default Icon
+export default createForwardRefComponent(Icon)
diff --git a/packages/taro-components-react/src/components/image/index.tsx b/packages/taro-components-react/src/components/image/index.tsx
index 739395caf7c6..5e10f730677c 100644
--- a/packages/taro-components-react/src/components/image/index.tsx
+++ b/packages/taro-components-react/src/components/image/index.tsx
@@ -3,6 +3,8 @@ import './style/index.css'
 import classNames from 'classnames'
 import React from 'react'
 
+import { createForwardRefComponent } from '../../utils/index'
+
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   src: string
   mode: string
@@ -10,6 +12,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   onLoad: (e) => void
   lazyLoad?: boolean
   imgProps?: Record<string, any>
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
 }
 
 class Image extends React.Component<IProps> {
@@ -72,6 +75,7 @@ class Image extends React.Component<IProps> {
       onError,
       lazyLoad,
       imgProps,
+      forwardedRef,
       ...reset
     } = this.props
     const cls = classNames(
@@ -87,7 +91,7 @@ class Image extends React.Component<IProps> {
     )
 
     return (
-      <div className={cls} style={style} {...reset}>
+      <div className={cls} style={style} ref={forwardedRef} {...reset}>
         {lazyLoad ? (
           <img
             ref={img => (this.imgRef = img)}
@@ -112,4 +116,4 @@ class Image extends React.Component<IProps> {
   }
 }
 
-export default Image
+export default createForwardRefComponent(Image)
diff --git a/packages/taro-components-react/src/components/input/index.tsx b/packages/taro-components-react/src/components/input/index.tsx
index 68a7739fd0d6..2b25e213b83b 100644
--- a/packages/taro-components-react/src/components/input/index.tsx
+++ b/packages/taro-components-react/src/components/input/index.tsx
@@ -3,7 +3,7 @@ import './style/index.scss'
 import classNames from 'classnames'
 import React from 'react'
 
-import { omit } from '../../utils'
+import { createForwardRefComponent, omit } from '../../utils'
 
 function getTrueType (type: string | undefined, confirmType: string, password: boolean) {
   if (confirmType === 'search') type = 'search'
@@ -33,6 +33,7 @@ interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'ty
   confirmType?: string
   name?: string
   type?: string
+  forwardedRef?: React.MutableRefObject<HTMLInputElement>
   onConfirm?: (e) => void
 }
 
@@ -243,6 +244,9 @@ class Input extends React.Component<IProps, null> {
       <input
         ref={(input: HTMLInputElement) => {
           this.inputRef = input
+          if (this.props.forwardedRef) {
+            this.props.forwardedRef.current = input
+          }
         }}
         {...otherProps}
         className={cls}
@@ -264,4 +268,4 @@ class Input extends React.Component<IProps, null> {
   }
 }
 
-export default Input
+export default createForwardRefComponent(Input)
diff --git a/packages/taro-components-react/src/components/pull-down-refresh/index.tsx b/packages/taro-components-react/src/components/pull-down-refresh/index.tsx
index 29ee8d315188..8c155ec38115 100644
--- a/packages/taro-components-react/src/components/pull-down-refresh/index.tsx
+++ b/packages/taro-components-react/src/components/pull-down-refresh/index.tsx
@@ -4,6 +4,8 @@ import Taro from '@tarojs/taro'
 import classNames from 'classnames'
 import React from 'react'
 
+import { createForwardRefComponent } from '../../utils/index'
+
 function setTransform (nodeStyle, value) {
   nodeStyle.transform = value
   nodeStyle.webkitTransform = value
@@ -45,6 +47,7 @@ interface IProps extends React.HTMLAttributes<HTMLBaseElement> {
   damping: number
   indicator: INDICATOR
   onRefresh?: () => void
+  forwardedRef?: React.MutableRefObject<HTMLBaseElement>
 }
 
 interface IState {
@@ -337,6 +340,9 @@ class PullDownRefresh extends React.Component<IProps, IState> {
       <pull-down-refresh
         ref={el => {
           this.containerRef = el
+          if (this.props.forwardedRef) {
+            this.props.forwardedRef.current = el
+          }
         }}
         className={classNames(className, prefixCls, `${prefixCls}-down`)}
         {...restProps}
@@ -347,4 +353,4 @@ class PullDownRefresh extends React.Component<IProps, IState> {
   }
 }
 
-export default PullDownRefresh
+export default createForwardRefComponent(PullDownRefresh)
diff --git a/packages/taro-components-react/src/components/scroll-view/index.tsx b/packages/taro-components-react/src/components/scroll-view/index.tsx
index 15116fb30046..aaa55ca3e1a2 100644
--- a/packages/taro-components-react/src/components/scroll-view/index.tsx
+++ b/packages/taro-components-react/src/components/scroll-view/index.tsx
@@ -3,7 +3,7 @@ import './style/index.css'
 import classNames from 'classnames'
 import React from 'react'
 
-import { throttle } from '../../utils'
+import { createForwardRefComponent, throttle } from '../../utils'
 
 function easeOutScroll (from = 0, to = 0, callback) {
   if (from === to || typeof from !== 'number') {
@@ -70,6 +70,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   scrollIntoViewAlignment?: ScrollLogicalPosition
   scrollWithAnimation: boolean
   enableBackToTop?: boolean
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
   onScrollToUpper: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void
   onScrollToLower: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void
   onScroll: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void
@@ -193,6 +194,7 @@ class ScrollView extends React.Component<IProps> {
       <div
         ref={container => {
           this.container = container
+          this.props.forwardedRef && (this.props.forwardedRef.current = container as HTMLDivElement)
         }}
         style={style}
         className={cls}
@@ -205,4 +207,4 @@ class ScrollView extends React.Component<IProps> {
   }
 }
 
-export default ScrollView
+export default createForwardRefComponent(ScrollView)
diff --git a/packages/taro-components-react/src/components/swiper/index.tsx b/packages/taro-components-react/src/components/swiper/index.tsx
index 3bffb800e76d..48251962d306 100644
--- a/packages/taro-components-react/src/components/swiper/index.tsx
+++ b/packages/taro-components-react/src/components/swiper/index.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import React from 'react'
 import Swipers from 'swiper/swiper-bundle.esm.js'
 
-import { debounce } from '../../utils'
+import { createForwardRefComponent, debounce } from '../../utils'
 
 import type ISwiper from 'swiper'
 
@@ -13,6 +13,7 @@ let INSTANCE_ID = 0
 
 interface SwiperItemProps extends React.HTMLAttributes<HTMLDivElement> {
   itemId: string
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
 }
 
 interface SwiperProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -30,6 +31,7 @@ interface SwiperProps extends React.HTMLAttributes<HTMLDivElement> {
   indicatorActiveColor?: string
   indicatorDots?: boolean
   onAnimationFinish?: (e: TouchEvent) => void
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
 }
 
 const createEvent = (type: string) => {
@@ -43,15 +45,16 @@ const createEvent = (type: string) => {
   return e
 }
 
-class SwiperItem extends React.Component<SwiperItemProps, Record<string, unknown>> {
+class SwiperItemInner extends React.Component<SwiperItemProps, Record<string, unknown>> {
   render () {
-    const { className, style, itemId, children, ...restProps } = this.props
+    const { className, style, itemId, children, forwardedRef, ...restProps } = this.props
     const cls = classNames('swiper-slide', className)
     return (
       <div
         className={cls}
         style={style}
         item-id={itemId}
+        ref={forwardedRef}
         {...restProps}
       >
         {children}
@@ -60,7 +63,7 @@ class SwiperItem extends React.Component<SwiperItemProps, Record<string, unknown
   }
 }
 
-class Swiper extends React.Component<SwiperProps, Record<string, unknown>> {
+class SwiperInner extends React.Component<SwiperProps, Record<string, unknown>> {
   _id = 1 + INSTANCE_ID++
   _$current = 0
   _$width = 0
@@ -274,6 +277,7 @@ class Swiper extends React.Component<SwiperProps, Record<string, unknown>> {
       previousMargin,
       nextMargin,
       indicatorColor,
+      forwardedRef,
       indicatorActiveColor
     } = this.props
     const defaultIndicatorColor = indicatorColor || 'rgba(0, 0, 0, .3)'
@@ -294,7 +298,7 @@ class Swiper extends React.Component<SwiperProps, Record<string, unknown>> {
       }
     )
     return (
-      <div className={`swiper-container-wrapper ${cls}`} style={sty}>
+      <div className={`swiper-container-wrapper ${cls}`} style={sty} ref={forwardedRef}>
         <div className='swiper-container' style={{ overflow: 'visible' }} ref={(el) => { this.$el = el }}>
           <div
             dangerouslySetInnerHTML={{
@@ -312,4 +316,7 @@ class Swiper extends React.Component<SwiperProps, Record<string, unknown>> {
   }
 }
 
+const SwiperItem = createForwardRefComponent(SwiperItemInner)
+const Swiper = createForwardRefComponent(SwiperInner)
+
 export { Swiper, SwiperItem }
diff --git a/packages/taro-components-react/src/components/text/index.tsx b/packages/taro-components-react/src/components/text/index.tsx
index 6770a7c0a7e4..3138d714c2ff 100644
--- a/packages/taro-components-react/src/components/text/index.tsx
+++ b/packages/taro-components-react/src/components/text/index.tsx
@@ -3,13 +3,16 @@ import './style/index.css'
 import classNames from 'classnames'
 import React from 'react'
 
+import { createForwardRefComponent } from '../../utils/index'
+
 interface IProps extends React.HTMLAttributes<HTMLSpanElement> {
   selectable?: boolean
+  forwardedRef?: React.MutableRefObject<HTMLSpanElement>
 }
 
 class Text extends React.Component<IProps, Record<string, unknown>> {
   render () {
-    const { className, selectable = false, ...restProps } = this.props
+    const { className, forwardedRef, selectable = false, ...restProps } = this.props
     const cls = classNames(
       'taro-text',
       {
@@ -18,11 +21,11 @@ class Text extends React.Component<IProps, Record<string, unknown>> {
       className
     )
     return (
-      <span {...restProps} className={cls}>
+      <span {...restProps} className={cls} ref={forwardedRef}>
         {this.props.children}
       </span>
     )
   }
 }
 
-export default Text
+export default createForwardRefComponent(Text)
diff --git a/packages/taro-components-react/src/components/view/index.tsx b/packages/taro-components-react/src/components/view/index.tsx
index b2835f8e39a3..c7a7bede6b32 100644
--- a/packages/taro-components-react/src/components/view/index.tsx
+++ b/packages/taro-components-react/src/components/view/index.tsx
@@ -3,10 +3,13 @@ import './style/index.css'
 import classNames from 'classnames'
 import React from 'react'
 
+import { createForwardRefComponent } from '../../utils/index'
+
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   hoverClass?: string
   hoverStartTime?: number
   hoverStayTime?: number
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
   onTouchStart?(e: React.TouchEvent<HTMLDivElement>): void
   onTouchEnd?(e: React.TouchEvent<HTMLDivElement>): void
   onTouchMove?(e: React.TouchEvent<HTMLDivElement>): void
@@ -36,6 +39,7 @@ class View extends React.Component<IProps, IState> {
       onTouchMove,
       hoverStartTime = 50,
       hoverStayTime = 400,
+      forwardedRef,
       ...other
     } = this.props
 
@@ -96,6 +100,7 @@ class View extends React.Component<IProps, IState> {
 
     return (
       <div
+        ref={forwardedRef}
         className={cls}
         onTouchStart={_onTouchStart}
         onTouchEnd={_onTouchEnd}
@@ -108,4 +113,4 @@ class View extends React.Component<IProps, IState> {
   }
 }
 
-export default View
+export default createForwardRefComponent(View)
diff --git a/packages/taro-components-react/src/utils/index.ts b/packages/taro-components-react/src/utils/index.tsx
similarity index 78%
rename from packages/taro-components-react/src/utils/index.ts
rename to packages/taro-components-react/src/utils/index.tsx
index 13cf385abf4b..724a565e24f4 100644
--- a/packages/taro-components-react/src/utils/index.ts
+++ b/packages/taro-components-react/src/utils/index.tsx
@@ -1,3 +1,5 @@
+import React, { forwardRef } from 'react'
+
 export function throttle (fn, threshold = 250, scope?) {
   let lastTime = 0
   let deferTimer: ReturnType<typeof setTimeout>
@@ -37,3 +39,12 @@ export function omit (obj, fields) {
   }
   return shallowCopy
 }
+
+export const createForwardRefComponent = (ReactComponent: any) => {
+  const forwardRefComponent = (
+    props,
+    ref
+  ) => <ReactComponent {...props} forwardedRef={ref} />
+
+  return forwardRef(forwardRefComponent)
+}
diff --git a/packages/taro-jd/src/components-react.ts b/packages/taro-jd/src/components-react.ts
index 1d8eddf9556b..649e5a443837 100644
--- a/packages/taro-jd/src/components-react.ts
+++ b/packages/taro-jd/src/components-react.ts
@@ -1,3 +1,4 @@
 export * from '@tarojs/components/mini'
 export const Editor = 'editor'
-
+export const PageContainer = 'page-container'
+export const RootPortal = 'root-portal'
diff --git a/packages/taro-jd/src/components.ts b/packages/taro-jd/src/components.ts
index 5bc9da815bed..fe021ea580f1 100644
--- a/packages/taro-jd/src/components.ts
+++ b/packages/taro-jd/src/components.ts
@@ -25,4 +25,39 @@ export const components = {
     'adjust-position': 'true',
     'disable-default-padding': 'false',
   },
+  RootPortal: {
+    enable: 'true'
+  },
+  Editor: {
+    'read-only': 'false',
+    placeholder: '',
+    'show-img-size': 'false',
+    'show-img-toolbar': 'false',
+    'show-img-resize': 'false',
+    focus: 'false',
+    bindReady: '',
+    bindFocus: '',
+    bindBlur: '',
+    bindInput: '',
+    bindStatusChange: '',
+    name: ''
+  },
+  PageContainer: {
+    show: 'false',
+    duration: '300',
+    'z-index': '100',
+    overlay: 'true',
+    position: "'bottom'",
+    round: 'false',
+    'close-on-slide-down': 'false',
+    'overlay-style': '',
+    'custom-style': '',
+    bindBeforeEnter: '',
+    bindEnter: '',
+    bindAfterEnter: '',
+    bindBeforeLeave: '',
+    bindLeave: '',
+    bindAfterLeave: '',
+    bindClickOverlay: ''
+  },
 }
diff --git a/packages/taro-mini-runner/src/__tests__/__snapshots__/jd.spec.ts.snap b/packages/taro-mini-runner/src/__tests__/__snapshots__/jd.spec.ts.snap
index 30435cf4e20f..7d6232b8e880 100644
--- a/packages/taro-mini-runner/src/__tests__/__snapshots__/jd.spec.ts.snap
+++ b/packages/taro-mini-runner/src/__tests__/__snapshots__/jd.spec.ts.snap
@@ -88,6 +88,41 @@ require("./taro");
                 "show-confirm-bar": "true",
                 "adjust-position": "true",
                 "disable-default-padding": "false"
+            },
+            RootPortal: {
+                enable: "true"
+            },
+            Editor: {
+                "read-only": "false",
+                placeholder: "",
+                "show-img-size": "false",
+                "show-img-toolbar": "false",
+                "show-img-resize": "false",
+                focus: "false",
+                bindReady: "",
+                bindFocus: "",
+                bindBlur: "",
+                bindInput: "",
+                bindStatusChange: "",
+                name: ""
+            },
+            PageContainer: {
+                show: "false",
+                duration: "300",
+                "z-index": "100",
+                overlay: "true",
+                position: "'bottom'",
+                round: "false",
+                "close-on-slide-down": "false",
+                "overlay-style": "",
+                "custom-style": "",
+                bindBeforeEnter: "",
+                bindEnter: "",
+                bindAfterEnter: "",
+                bindBeforeLeave: "",
+                bindLeave: "",
+                bindAfterLeave: "",
+                bindClickOverlay: ""
             }
         };
         const hostConfig = {
diff --git a/packages/taro-webpack5-runner/src/__tests__/__snapshots__/mini-platform.spec.ts.snap b/packages/taro-webpack5-runner/src/__tests__/__snapshots__/mini-platform.spec.ts.snap
index 34f6f87b98a3..563452ccf22d 100644
--- a/packages/taro-webpack5-runner/src/__tests__/__snapshots__/mini-platform.spec.ts.snap
+++ b/packages/taro-webpack5-runner/src/__tests__/__snapshots__/mini-platform.spec.ts.snap
@@ -2987,6 +2987,41 @@ require("./runtime");
                 "show-confirm-bar": "true",
                 "adjust-position": "true",
                 "disable-default-padding": "false"
+            },
+            RootPortal: {
+                enable: "true"
+            },
+            Editor: {
+                "read-only": "false",
+                placeholder: "",
+                "show-img-size": "false",
+                "show-img-toolbar": "false",
+                "show-img-resize": "false",
+                focus: "false",
+                bindReady: "",
+                bindFocus: "",
+                bindBlur: "",
+                bindInput: "",
+                bindStatusChange: "",
+                name: ""
+            },
+            PageContainer: {
+                show: "false",
+                duration: "300",
+                "z-index": "100",
+                overlay: "true",
+                position: "'bottom'",
+                round: "false",
+                "close-on-slide-down": "false",
+                "overlay-style": "",
+                "custom-style": "",
+                bindBeforeEnter: "",
+                bindEnter: "",
+                bindAfterEnter: "",
+                bindBeforeLeave: "",
+                bindLeave: "",
+                bindAfterLeave: "",
+                bindClickOverlay: ""
             }
         };
         const hostConfig = {