feat: amis 渲染支持将 schema 的tagger标记到dom (#16180)

Author: 2betop

examples/components/Form/Custom.tsx

@@ -27,7 +27,7 @@ class MyFormItem extends React.Component {
 }
 
 @Renderer({
-  test: /(^|\/)my\-renderer$/,
+  type: 'my-renderer',
   autoVar: true
 })
 class CustomRenderer extends React.Component {

examples/components/MdRenderer.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
-import {findDOMNode} from 'react-dom';
+import {findDomCompat as findDOMNode} from 'amis-core';
 import {createRoot} from 'react-dom/client';
 import {getTheme, render} from 'amis';
 import {LazyComponent} from 'amis-core';

packages/amis-core/src/RootRenderer.tsx

@@ -11,11 +11,11 @@ import pick from 'lodash/pick';
 import mapValues from 'lodash/mapValues';
 import {saveAs} from 'file-saver';
 import {normalizeApi} from './utils/api';
-import {findDOMNode} from 'react-dom';
+import {findDomCompat as findDOMNode} from './utils/findDomCompat';
 import LazyComponent from './components/LazyComponent';
 import {hasAsyncRenderers, loadAsyncRenderersByType} from './factory';
 import {dispatchEvent} from './utils/renderer-event';
-import {GlobalVariableItem} from 'amis-core';
+import {GlobalVariableItem} from './globalVar';
 
 export interface RootRendererProps extends RootProps {
   /**

packages/amis-core/src/SchemaRenderer.tsx

@@ -46,6 +46,7 @@ import {observeGlobalVars} from './globalVar';
 import type {IRootStore} from './store/root';
 import {createObjectFromChain, extractObjectChain} from './utils';
 import {IIRendererStore} from './store/index';
+import TaggerWrapper from './TaggerWrapper';
 
 interface SchemaRendererProps
   extends Partial<Omit<RendererProps, 'statusStore'>>,
@@ -656,6 +657,12 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       );
     }
 
+    if (schema.$$tagger) {
+      component = (
+        <TaggerWrapper tagger={schema.$$tagger}>{component}</TaggerWrapper>
+      );
+    }
+
     return this.props.env.enableAMISDebug ? (
       <DebugWrapper renderer={renderer}>{component}</DebugWrapper>
     ) : (

packages/amis-core/src/TaggerWrapper.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import {findDomCompat} from './utils/findDomCompat';
+
+interface TaggerWrapperProps {
+  children: React.ReactElement;
+  tagger: {
+    [propName: string]: string | number;
+  };
+}
+
+/**
+ * 自动给组件对应 dom 打标记，开发态时才会进来
+ * @param param0
+ * @returns
+ */
+export const TaggerWrapper: React.FC<TaggerWrapperProps> = ({
+  children,
+  tagger
+}) => {
+  const ref = React.useRef<HTMLElement | null>(null);
+
+  React.useLayoutEffect(() => {
+    if (!ref.current || !tagger) {
+      return;
+    }
+
+    const dom = findDomCompat(ref.current);
+    const attrs: any = {};
+    Object.keys(tagger).forEach(key => {
+      if (typeof tagger[key] === 'string' || typeof tagger[key] === 'number') {
+        attrs[`data-amis-tagger-${key}`] = String(tagger[key]);
+      }
+    });
+
+    Object.keys(attrs).forEach(key => {
+      dom?.setAttribute(key, attrs[key]);
+    });
+
+    return () => {
+      Object.keys(attrs).forEach(key => {
+        dom?.removeAttribute(key);
+      });
+    };
+  }, [tagger, ref.current]);
+
+  // 合并 ref：保持原有 ref，同时添加我们的 ref
+  const mergedRef = React.useCallback(
+    (node: HTMLElement | null) => {
+      ref.current = node;
+
+      // 如果原有 children 有 ref，也调用它
+      const childRef = (children as any).ref;
+      if (childRef) {
+        if (typeof childRef === 'function') {
+          childRef(node);
+        } else {
+          // ref 对象
+          childRef.current = node;
+        }
+      }
+    },
+    [children]
+  );
+
+  return React.cloneElement(children, {
+    ref: mergedRef
+  } as any);
+};
+
+export default TaggerWrapper;

packages/amis-core/src/components/Overlay.tsx

@@ -6,7 +6,8 @@
 
 import Portal from 'react-overlays/Portal';
 import classNames from 'classnames';
-import ReactDOM, {findDOMNode} from 'react-dom';
+import ReactDOM from 'react-dom';
+import {findDomCompat as findDOMNode} from '../utils';
 import React, {cloneElement} from 'react';
 import {
   autobind,
@@ -134,7 +135,7 @@ class Position extends React.Component<any, any> {
   getTarget = () => {
     const {target} = this.props;
     const targetElement = typeof target === 'function' ? target() : target;
-    return (targetElement && ReactDOM.findDOMNode(targetElement)) || null;
+    return (targetElement && findDOMNode(targetElement)) || null;
   };
 
   componentDidUpdate(prevProps: any) {

packages/amis-core/src/components/PopOver.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import {findDOMNode} from 'react-dom';
+import {findDomCompat as findDOMNode} from '../utils/findDomCompat';
 import {ClassNamesFn, themeable} from '../theme';
 import {autobind, camel, preventDefault, TestIdBuilder} from '../utils';
 import {SubPopoverDisplayedID} from './Overlay';

packages/amis-core/src/renderers/Item.tsx

@@ -38,7 +38,7 @@ import {HocStoreFactory} from '../WithStore';
 import {wrapControl} from './wrapControl';
 import debounce from 'lodash/debounce';
 import {isApiOutdated, isEffectiveApi} from '../utils/api';
-import {findDOMNode} from 'react-dom';
+import {findDomCompat as findDOMNode} from '../utils/findDomCompat';
 import {
   createObjectFromChain,
   dataMapping,

packages/amis-core/src/utils/RootClose.ts

@@ -4,7 +4,7 @@
 
 import React, {useState} from 'react';
 import useRootClose from 'react-overlays/useRootClose';
-import {findDOMNode} from 'react-dom';
+import {findDomCompat as findDOMNode} from '../utils/findDomCompat';
 
 export const RootClose = ({children, onRootClose, ...props}: any) => {
   const [rootComponent, attachRef] = useState(null);

packages/amis-core/src/utils/debug.tsx

@@ -4,7 +4,8 @@
 
 import React, {Component, useEffect, useRef, useState, version} from 'react';
 import cx from 'classnames';
-import {findDOMNode, render, unmountComponentAtNode} from 'react-dom';
+import {render, unmountComponentAtNode} from 'react-dom';
+import {findDomCompat as findDOMNode} from './findDomCompat';
 // import {createRoot} from 'react-dom/client';
 import {autorun, observable, action} from 'mobx';
 import {observer} from 'mobx-react';