将React Component或Element插入到不是DOM Element的特定div中

Question

需要帮助！

我尝试将一个React Component插入另一个组件生成的特定div中，更准确地说，是google.maps.Map（） 详情请见：

class GoogleMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loc: {
        lat: 46.31555,
        lng: 44.25878
      },
      zoom: 18,
      buttonAddNewStoreClicked: false
    };
  }

  shouldComponentUpdate() {
      return false;
  }

  componentDidMount() {

    // get access to GoogleMap
    var gmap = this; 

    // render googlemap
    this.map = new google.maps.Map(this.refs.map, {
      center: { lat: this.state.loc.lat, lng: this.state.loc.lng },
      zoom: this.state.zoom,
      zoomControl: false,
      streetViewControl: false,
      fullscreenControl: false
    });

    // create custom control - button
    var buttonAddNewStoreDiv = document.createElement('div');
    // const buttonAddNewStoreDiv = React.createElement('div', {id: 'button-add-new-store'}, 'BUTTON');

    buttonAddNewStoreDiv.id = 'button-add-new-store';
    buttonAddNewStoreDiv.index = 1;

    this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(buttonAddNewStoreDiv);



    // add click event listener to the map
    this.map.addListener('click', function(e) {
      console.log(document.querySelector('#button-add-new-store'));
      console.log(gmap);
      if (gmap.state.buttonAddNewStoreClicked) {
        var marker = new google.maps.Marker({
          position: e.latLng,
          map: this
        });
      }

      gmap.setState({ buttonAddNewStoreClicked: false });
    });
  }

  render() {
    return(
      <div id="map" ref="map">
      </div>
    ); 
  }
}

export default GoogleMap;

这是我的App.js：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import StoreContainer from './components/StoreContainer'
import GoogleMap from './components/GoogleMap'
import NavBarHeader from './components/NavBarHeader'
// import AddNewStoreModalDialog from './components/AddNewStoreModalDialog'

class App extends Component {
  render() {
    return(
      <div className="App">
        <div class="header">
          <NavBarHeader />
        </div>
        <div class="main-container">
          <div class="left-container">
            <GoogleMap />
          </div>
          <div class="right-container">
            <StoreContainer />
          </div>
        </div>   
      </div>
    )
  }
}

export default App;

生成以下html代码：

<div id="root">
  <div class="App">
    <div class="header">...</div>
    <div class="main-container">
      <div class="left-container">
        <div id="map" style="...">
          <div style="..">
            <div class="gm-style" style="..">
              <div>...</div>
              <div>...</div>
              ...
              ...
              <div id="button-add-new-store" style="z-index=0; position: absolute; ... "></div>
              ...
              ...
              <div>...</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-container">...</div>
    </div>
  </div>
</div>

是否可以将以下反应组件AddNewStoreModalDialog插入div中，其id =＆＃34; button-add-new-store＆＃34;？如果是这样，怎么做？

import React, { Component } from 'react'
import { Modal, Button } from 'react-bootstrap';

class AddNewStoreModalDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: true
    };
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
  }

  open() {
    this.setState({ showModal: true });
  }

  close() {
    alert('close')
    this.setState({ showModal: false });
  }

  render() {
    return(
      <div className="add-new-store-button">
        <Button bsStyle="primary" onClick={this.open}>
          + New store
        </Button>
        <Modal id="add-new-store-modal" show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
          </Modal.Header>

          <Modal.Body>
            One fine body...
          </Modal.Body>

          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
            <Button bsStyle="primary">Save changes</Button>
          </Modal.Footer>

        </Modal>
      </div>
    );
  }
}

export default AddNewStoreModalDialog;