reactjs - Gutenberg - 在渲染 DOM 后调用谷歌地图渲染函数

Question

我有点进退两难。

在save函数renderMap中，我需要调用一个呈现动态谷歌地图的函数。但是我需要在渲染 DOM 后调用它。我似乎无法为此找到解决方案。我意识到你不能通过saveReact 生命周期向函数添加一个类，所以我停止了。它确实适用于该edit功能。有哪些可能性？

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>
        )
    }
})

标签： reactjswordpresswordpress-gutenberggutenberg-blocks