React18版本需要提示更新

[ZYyyh-cool]

import { Map,Marker} from '@uiw/react-amap';
使用Map就会提示
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more
希望能更新下React18版本
使用情况：

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <APILoader akay="">
            <Map 
             viewMode='3D'
             zoom='11.8'
             center={[10.126,30.236]}
             mapStyle= "amap://styles/darkblue"
             >
            </Map>
      </APILoader>
    </Suspense>
  );
}


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
      <Provider store={store}>
        <App />
     </Provider>
);

[jaywcjlove]

@ZYyyh-cool https://codesandbox.io/embed/react-amap-example-y0n6c-forked-jbeyw4?fontsize=14&hidenavigation=1&theme=dark

我这边测试没有问题，参考上面示例

[jaywcjlove]

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

@ZYyyh-cool 错误在于你 18 的 API使用

[jaywcjlove]

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

[ZYyyh-cool]

@jaywcjlove 18 API使用没用问题，可以看看上面使用情况代码，注释掉Map组件没有报错，我再排查下

[ZYyyh-cool]

我也测试了你的实例，也是没有问题

[jaywcjlove]

@ZYyyh-cool createRoot 倒入官方指定下面方式。ReactDOM.createRoot 是错误的吧

import { createRoot } from 'react-dom/client';

[ZYyyh-cool]

尝试在Map组件里面添加Marker会报错，不确实是否能这样用，我看你们的官网网站是这样用的

<ScaleControl offset={[16, 30]} position="LB" />
<ToolBarControl offset={[16, 10]} position="RB" />
<ControlBarControl offset={[16, 180]} position="RB" />
<Geolocation
maximumAge={100000}
borderRadius="5px"
position="RB"
offset={[16, 80]}
zoomToAccuracy={true}
showCircle={true}
/>
<Marker title="北京市" position={new AMap.LngLat(116.405285, 39.904989)} />

[ZYyyh-cool]

我换这种用法就没有报错了

{({ AMap, map, container }) => {
return;
}}

[HerbertHe]

我也是添加Marker有报错

[HerbertHe]

还有之前提到的类型不兼容的问题: #233

[jaywcjlove]

• Bug: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client". facebook/react#24292 (comment)

[jaywcjlove]

React 17 示例: https://codesandbox.io/embed/react-amap-example-react-17-y0n6c?fontsize=14&hidenavigation=1&theme=dark
React 18 示例: https://codesandbox.io/embed/react-amap-example-react-18-2ulj5v?fontsize=14&hidenavigation=1&theme=dark

@ZYyyh-cool @HerbertHe 我已经解决问题，同时支持 react 17/18