高德地图 如何渲染react组件

背景

该需求常见于可视化类项目，众所周知大家在写echarts的时候可能都是字符串拼接，进行渲染，那我们有各种各样的组件库，有一些复杂的操作可能还需要使用到，那么如何又快又好的实现功能呢。

解决方案

react17 版本

//代码封装
import ReactDOM from 'react-dom'
import * as React from 'react';

export const createDomString = (dom: React.ReactNode) => {
  return new Promise((resolve, reject) => {
    // resolve(el.innerHTML);
    const el = document.createElement('div')
    ReactDOM.render(dom, el, () => {
      // console.dir(el,"el");
      resolve(el)
    })
  })
}
// 使用方法 可以拿到原生dom 接下来就可以在需要使用的地方进行使用啦
  ...
  const dom = await createDomString(<MainTip otherRef={otherRef} avgPrice=    {avgPrice} ele={ele} />)
  ....