Reactjs Gutenberg-渲染DOM后在save中调用google map渲染函数

我有点进退两难

在

save

函数中，我需要调用一个呈现动态谷歌地图的函数

renderMap

。但是，我需要在呈现DOM之后调用它。我似乎找不到解决这个问题的办法。我意识到您不能使用React生命周期将类添加到

save

函数中，因此我被停止。但它确实适用于

编辑

功能。有什么可能性

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { Component } from '@wordpress/element';

const renderMap = function() {
    let googleMap = document.getElementById('google-map')
    let map
  map = new google.maps.Map(googleMap, {
    center: { lat: 37.79406, lng: -122.4002 },
    zoom: 14,
    disableDefaultUI: true,
  })
}

registerBlockType( 'splash-blocks/google-maps', { 
    title: __('Google maps locations', 'google-maps'),
    icon: 'megaphone',
    category: 'common',
    keyword: [
        __( 'Display Google maps locations' ),
    ],
    atrributes: {
        markers: {
            type: 'object'
        },
    address: {
        type: 'string',
        default: 'xxxxxxxxx',
        }, 
        api_key: {
        type: 'string',
        default: 'xxxxxxxxx',
        }
    },
    edit: class extends Component {
        constructor(props) {
        super(props)
      }

     componentDidMount() {
            renderMap()
        }

        render() {
            const { attributes, setAttributes } = this.props

            return ( 
                <div id='google-map'>
                </div>
            )
        }
    },
    save: props => {
        const {
      className,
      attributes: { mapHTML }
    } = props;
renderMap()
        return (
            <div id='google-map'>
            </div>
        )
    }
})

从'@wordpress/i18n'导入{_}；
从'@wordpress/blocks'导入{registerBlockType}；
从“@wordpress/edit post”导入{PluginDocumentSettingPanel}；
从'@wordpress/element'导入{Component}；
const renderMap=函数（）{
让googleMap=document.getElementById（'google-map'）
让地图
map=新的google.maps.map（googleMap{
中心：{lat:37.79406，lng:-122.4002}，
缩放：14，
disableDefaultUI:true，
})
}
registerBlockType（'splash blocks/google maps'，{
标题：_uu（‘谷歌地图位置’、‘谷歌地图’），
图标：“扩音器”，
类别：'普通'，
关键词：[
__（“显示谷歌地图位置”），
],
A分布：{
标记：{
类型：“对象”
},
地址:{
键入：“字符串”，
默认值：“XXXXXXXX”，
}, 
api_密钥：{
键入：“字符串”，
默认值：“XXXXXXXX”，
}
},
编辑：类扩展组件{
建造师（道具）{
超级（道具）
}
componentDidMount（）{
renderMap（）
}
render（）{
const{attributes，setAttributes}=this.props
报税表（
)
}
},
保存：道具=>{
常数{
类名，
属性：{mapHTML}
}=道具；
renderMap（）
返回(
)
}
})

savefunctions的任务是将块属性转换为HTML并保存为post\u内容。为什么在这个过程中需要渲染地图？我刚刚了解了

save

函数的功能，它与我认为的功能不兼容。无论如何，我需要在前端显示地图。我想我知道该怎么做了。我通常将一个单独的JS文件排队，以便在前端渲染谷歌地图。