Googleマップの灰色のボックスが反応するjs内の隠れたdivにある

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でマップを初期化する親がthis.state.hideScoreを変更するsetStateを呼び出した後に再レンダリングするとき、あなたの代わりにそれを初期化する必要があります。現時点では、マップが親が表示される前に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; 
}