在 React 选项卡组件中管理 OpenLayers 映射

Question

我正在构建一个带有各种选项卡的导航栏的 SPA 应用程序。选择选项卡时，我通过 redux 调度操作，AppBody组件根据选择的选项卡重新呈现自身(请参阅AppBody中的renderAppBody())。

我的问题是其中一个选项卡必须包含 OpenLayers 地图。首先，我在安装地图时遇到了很多麻烦，因为它必须针对 DOM 上已经存在的元素。我通过覆盖componentDidMount来做到这一点：

地图正文.js

import React from 'react';
import "ol/ol.css"
import Map from 'ol/map'
import View from 'ol/view'
import Tile from 'ol/layer/tile'
import OSM from 'ol/source/osm'
import "../../sass/App.scss";

var map = new Map({
layers: [
new Tile({
source: new OSM()
}),
],
view: new View({
center: [0, 0],
zoom: 4
})
});

const MapBody = React.createClass({
render: function () {
return (<div id="map"></div>);
},
componentDidMount: function () {
map.setTarget("map");
}
});
export default MapBody;

这意味着每当我切换选项卡时，我的 Map 元素都会被销毁/删除并替换为下一个选项卡的内容。其效果是，当我第一次选择地图选项卡时，它会呈现，但是如果我随后选择另一个选项卡，然后重新选择地图选项卡，则地图将不会渲染。

对于我想要的结果，我的方法是否存在固有的缺陷？这是我的第一个 React 项目，所以我不确定设计这种行为的最佳方式。

我应该：

• 维护对地图项的引用并在重新渲染时重新追加它？(似乎有问题)
• 隐藏选项卡而不是替换它们？(似乎也有问题)
• 使 MapBody 有两种状态：visible和inactive。然后始终将其呈现到屏幕上，并根据其状态使用CSS将其隐藏(看起来很hack)
• 更优雅的东西？

应用正文.js

import React from 'react';
import { connect } from 'react-redux';
import Activity from '../components/body/Activity'
import CategoryBody from '../components/body/CategoryBody'
import MapBody from '../components/body/MapBody'
import Search from '../components/body/Search'
import tabs from "../actions/tabDefinitions.js"
import "../sass/App.scss";
function renderAppBody(activeTab) {
switch (activeTab) {
case tabs.T_CATEGORIES:
return <CategoryBody />
case tabs.T_MAP:
return (<MapBody />)
case tabs.T_SEARCH:
return <Search />
case tabs.T_ACTIVITY:
return <Activity />
default:
return <div>Oops! Something went wrong :(</div>
}
}
const AppBody = ({activeTab}) => (
<div className="frame_wrapper">
{renderAppBody(activeTab)}
</div>
)

const mapStateToProps = (state) => ({
activeTab: state.activeTab,
});
export default connect(mapStateToProps)(AppBody);

谢谢！

Answer 1

我最终总是将MapBody组件添加到AppBody，而不管选择的选项卡是什么。然后，我添加了一个active道具，以MapBody添加显示/隐藏CSS类。这样，当选项卡更改时，地图容器永远不会被删除/重置，因此状态可以很好地保持。我的方法感觉不是特别优雅(阅读：这是一个肮脏的，肮脏的黑客)，但它仍然有效。

我MapBody渲染函数变成了：

render: function () {
return (<div id="map"
className={this.props.active ? "active_map" : "inactive_map"}>
</div>);
}

通过添加以下CSS主要给出了所需的行为：

.inactive_map {
display: none;
}

这导致在切换选项卡时正确呈现/隐藏地图容器，但地图画布为灰色，未呈现任何内容。为了解决这个问题，我覆盖了调用map.updateSize()componentDidUpdate()，这会强制重新计算地图视口大小。最终代码：

地图正文.js

const MapBody = React.createClass({
render: function () {
return (<div id="map"
className={this.props.active ? "active_map" : "inactive_map"}>
</div>);
},
componentDidMount: function () {
this.props.map.setTarget("map");
},
componentDidUpdate: function () {
this.props.map.updateSize();
}
});

应用正文.js

function renderAppBody(activeTab) {
switch (activeTab) {
case tabs.T_CATEGORIES:
return <CategoryBody />
case tabs.T_MAP:
return "";
case tabs.T_SEARCH:
return <Search />
case tabs.T_ACTIVITY:
return <Activity />
default:
return (<div>Oops! Something went wrong :(</div>)
}
}
const AppBody = ({activeTab}) => (
<div className="frame_wrapper">
{renderAppBody(activeTab)}
<Map active={activeTab == tabs.T_MAP}/>
</div>
)