Question

我在这里尝试了解决方案Google maps in hidden div，但它没有用。认为这可能是一个反应问题。未放置在隐藏div中时，地图加载正常。

当state.hideScore在父容器中变为false时，地图会显示为灰色框。有什么帮助吗？

父容器

<div hidden={this.state.hideScore}>         
<ScoreExplanation score={this.state.score} />
<br />
<ResultList data={this.state.scoreArray} />     
<ResultMap />           
</div>

组件

import React, { Component, PropTypes } from 'react';

var $ = require ('jquery');
var map;

var ResultMap = React.createClass({
  componentDidMount: function() {
    // ** Instantiating the Map ** //
    map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 14
        });

        google.maps.event.trigger(map, 'resize');
        map.setZoom( map.getZoom() );
  },
  render: function() {
    return (
      <div style={{overflow:'visible',height:'300px',width:'300px'}} id="map"></div>
    );
  }
});
export default ResultMap;

Answer 1

而不是在componentDidMount中初始化地图，而应在父母在调用setState后重新呈现以更改this.state.hideScore时对其进行初始化。现在正在发生的事情是，在父视图可见之前，您的地图将被加载到ResultMap组件中。您应该等到父组件可见，然后实例化ResultMap。

示例：

父组件呈现方法

// I prefer using CSS classes to hide/display components.
// Initialize hideScore to 'hidden' and see CSS.
render () {
  return (
    <div className={this.state.hideScore}>         
      <ScoreExplanation score={this.state.score} />
      <br />
      <ResultList data={this.state.scoreArray} />     
      <div id='result-container'></div>
    </div>
  )
}

父组件单击处理程序方法（可以是任何方法）。

handleClick = () => {
  this.setState({
    hideScore: 'shown' // See CSS.
  });
  ReactDOM.render(
    <ResultMap />,
    document.getElementById('result-container')
  );
}

CSS

.shown {
  display: block; // Or whatever is your preference.
}

.hidden {
  display: none;
}

谷歌地图灰色框在隐藏的div中反应js

1 个答案: