<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
function drawVisualization() { ... }
</script>
Этот кусок кода вообще особняком стоит. Нужно же его интегрировать ... Начнем!
Первым делом поместим функцию drawVisualization в наш js файл:
function drawVisualization(element, commonData, regionData) {
console.log('elemet', element);
var data = google.visualization.arrayToDataTable(commonData);
var mapVisualization = new google.visualization.GeoChart(element);
mapVisualization.draw(data, regionData);
}
И немного модифицируем главный файл:
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['geochart']});
</script>
Затем определим компонент, который будет рисовать карту:
class MapVisualization {
componentDidMount() {
this.drawMap();
}
componentDidUpdate() {
this.drawMap();
}
drawMap() {
drawVisualization(this.refs.mapDiv.getDOMNode(), this.props.commonData, this.props.data);
}
render() {
return (
<div ref="mapDiv" />
);
}
};
Готово. Все данные поместим в props компонента Tabs и затем изменим его render:
render() {
var list = this.props.data.map(function(d, i) { return <button type = "button" className = { 'tab' + (i === this.state.current ? ' active' : '') } key = { 'tab-' + i } onClick = { this.handleClick.bind(this, i) }>{d.title}</button>
}.bind(this));
const { commonData, data } = this.props;
const { current } = this.state;
return (
< div className = 'container' >
<div className='col-12'>
{list}
<div className = 'map'>
<MapVisualization data={data[current].content} commonData={commonData} />
</div>
</div>
</div>
);
}
Вместо ссылки я использую конечно-же
кнопку.
Конечный результатЭто конечно далеко от идеала, но я так понимаю Вы не давно начали реакт - поэтому пойдет
