javascript - 创建DOMNode以使用React或jQuery传递给Google Maps API

Google Maps Info Window API接受字符串或DOMNode作为参数。我可以使用document.createElement()生成DOMNode，但是随着我想在其中包含的信息增加，它迅速爆炸成许多行代码。

这是我的createInfoWindow方法，例如：

  _createInfoWindow(id, location) {
    ...
    let button = document.createElement('button')
    button.appendChild(document.createTextNode('Add to Itenerary'))
    google.maps.event.addDomListener(button, 'click', myFunction())
    let content = document.createElement('div')
    ...
    content.appendChild(button)
    return new google.maps.InfoWindow({ content })
  }

能够生成一个DOMNode更好，我可以将它作为参数传递给不太冗长的google maps api。我正在React中编写此应用程序，因此React是理想的选择，但是无论如何工作-如果有一种在jQuery中生成DOMNode的方法，我也想知道。上面的示例缺少创建一堆DOMElement并将其附加到内容的几行代码。

最佳答案

最好编写自己的包含内容的React组件，捕获对其DOM元素的引用，在componentDidMount（）中实例化google.maps.InfoWindow，并将其引用传递给DOM元素。像这样：

import React, {Component} from 'react'

class InfoWindow extends Component {
    componentDidMount() {
        this.infoWindowApi = new google.maps.InfoWindow({ content: this.infoDiv })
    }

    componentWillUnmount() {
        this.infoWindowApi && this.infoWindowApi.close();
    }

    render () {
        const { id, location, onButtonClick } = this.props;

        return (
            <div ref={ref => (this.infoDiv = ref)}>
                <h2>Info</h2>
                <p>${location}</p>
                <button onClick={onButtonClick}>Add to Itenerary</button>
            </div>
        );
    }
}

export default InfoWindow;

...在某些容器组件中的其他位置：

<InfoWindow
  id={someId}
  location={theLocation}
  onButtonClick={() => this.onInfoWindowClicked(location)}
/>

...或者如果您必须使用jQuery，只需创建一个快速的内容DIV并传递给InfoWindow：

var contentDiv = $('<div><h2>Info</h2><button>Add to Itinerary</button></div>').click(myFunction);

// [0] to extract first (and only) DOM element inside the jQuery selector
var infoWin = new google.maps.InfoWindow({ content: contentDiv[0] });