feat: Support react 18 (#234).

packages/info-window/src/useInfoWindow.tsx

@@ -9,7 +9,7 @@ export const useInfoWindow = (props = {} as UseInfoWindow) => {
   const { map } = useMapContext();
   const [isOpen, setIsOpen] = useState(visiable);
   const [infoWindow, setInfoWindow] = useState<AMap.InfoWindow>();
-  const { container, setContent } = useRenderDom({ children: props.children });
+  const container = useRenderDom({ children: props.children });
 
   useEffect(() => {
     if (!AMap || !map) return;
@@ -38,12 +38,6 @@ export const useInfoWindow = (props = {} as UseInfoWindow) => {
     }
   }, [props.children, container, other.content, infoWindow]);
 
-  useEffect(() => {
-    if (infoWindow) {
-      setContent(props.children);
-    }
-  }, [props.children, infoWindow]);
-
   useMemo(() => {
     if (isOpen !== visiable && infoWindow && map) {
       setIsOpen(visiable);

packages/marker/src/useMarker.tsx

@@ -8,7 +8,7 @@ export const useMarker = (props: UseMarker = {}) => {
   const { visiable, children, ...other } = props;
   const { map } = useMapContext();
   const [marker, setMarker] = useState<AMap.Marker>();
-  const { container, setContent } = useRenderDom({ children: props.children });
+  const container = useRenderDom({ children: props.children });
 
   useEffect(() => {
     if (!marker && map) {
@@ -33,11 +33,11 @@ export const useMarker = (props: UseMarker = {}) => {
     }
   }, [props.children, container, props.content, marker]);
 
-  useEffect(() => {
-    if (marker) {
-      setContent(props.children);
-    }
-  }, [props.children, marker]);
+  // useEffect(() => {
+  //   if (marker) {
+  //     setContent(props.children);
+  //   }
+  // }, [props.children, marker]);
 
   useVisiable(marker!, visiable);
   useSettingProperties<AMap.Marker, UseMarker>(marker!, props, [

packages/text/src/useText.tsx

@@ -8,7 +8,7 @@ export const useText = (props = {} as UseText) => {
   const { visiable, ...other } = props;
   const [text, setText] = useState<AMap.Text>();
   const { map } = useMapContext();
-  const { container, setContent } = useRenderDom({ children: props.children });
+  const container = useRenderDom({ children: props.children });
   useEffect(() => {
     if (!AMap || !map) return;
     if (!text) {
@@ -33,12 +33,6 @@ export const useText = (props = {} as UseText) => {
     }
   }, [props.children, props.text, container, text]);
 
-  useEffect(() => {
-    if (text) {
-      setContent(props.children);
-    }
-  }, [props.children, text]);
-
   useVisiable(text!, visiable);
   useSettingProperties<AMap.Text, UseText>(text!, props, [
     'Style',

packages/types/src/core.d.ts

@@ -539,6 +539,17 @@ declare namespace AMap {
      * 设置地图的显示样式，目前支持两种地图样式：
      * - 第一种：自定义地图样式，如 "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86" 可前往地图自定义平台定制自己的个性地图样式；
      * - 第二种：官方样式模版,如"amap://styles/grey"。 其他模版样式及自定义地图的使用说明见开发指南
+     * - `amap://styles/normal`,
+     * - `amap://styles/dark`,
+     * - `amap://styles/light`,
+     * - `amap://styles/whitesmoke`,
+     * - `amap://styles/fresh`,
+     * - `amap://styles/grey`,
+     * - `amap://styles/graffiti`,
+     * - `amap://styles/macaron`,
+     * - `amap://styles/blue`,
+     * - `amap://styles/darkblue`,
+     * - `amap://styles/wine`,
      */
     mapStyle?: string;
     /**

packages/utils/src/index.tsx

@@ -1,6 +1,6 @@
 /// <reference types="@uiw/react-amap-types" />
-import { render } from 'react-dom';
-import React, { Fragment, useEffect, useState, useRef, useLayoutEffect } from 'react';
+import ReactDOM from 'react-dom';
+import React, { Fragment, useEffect, useState, useRef, useLayoutEffect, useCallback } from 'react';
 
 /**
  * 对实例有 setStatus 更改状态的处理
@@ -152,14 +152,55 @@ export function useSettingProperties<T, F = {}>(instance = {} as T, props = {} a
   });
 }
 
+export const getReactDOMClient = async () => {
+  let _ReactDOM;
+  try {
+    // @ts-ignore
+    _ReactDOM = await import(/* webpackIgnore: true */ 'react-dom/client');
+    // 使用 require 解决 react v17 ts 报错问题
+    // _ReactDOM = require('react-dom/client');
+  } catch (err) {
+    // console.warn(`如果使用的是 react-dom 小于v18的版本，可以忽略此警告：${err}`)
+  }
+  return _ReactDOM;
+};
+
+/**
+ * react 17
+ *
+ * ```jsx
+ * import ReactDOM from 'react-dom';
+ * ReactDOM.render(<div>, _mount_ );
+ * ```
+ *
+ * react 18
+ *
+ * ```jsx
+ * import ReactDOM from 'react-dom/client';
+ * ReactDOM.createRoot(_mount_).render(<div />)
+ * ```
+ */
 export function useRenderDom(props: { children: React.ReactNode }) {
   const container = useRef(document.createElement('div'));
+  const ReactDOMClient = useCallback(async () => (window.ReactDOM ? window.ReactDOM : await getReactDOMClient()), []);
+  const maybeV18Root = useRef();
 
-  const [content, setContent] = useState(props.children);
+  useLayoutEffect(() => {
+    (async () => {
+      const RDom = (await ReactDOMClient()) || ReactDOM;
+      const isV18 = Reflect.has(RDom, 'createRoot');
+      maybeV18Root.current = isV18 ? RDom.createRoot(container.current) : null;
+    })();
+  }, []);
 
   useLayoutEffect(() => {
-    render(<Fragment>{content}</Fragment>, container.current);
-  }, [content]);
+    if (maybeV18Root.current) {
+      // @ts-ignore
+      maybeV18Root.current.render(<Fragment>{props.children}</Fragment>);
+    } else if (ReactDOM) {
+      ReactDOM.render(<Fragment>{props.children}</Fragment>, container.current);
+    }
+  }, [props.children, container.current, maybeV18Root.current]);
 
-  return { container: container.current, content, setContent };
+  return container.current;
 }