Mapbox Map彼此呈现

问题描述

我正在使用react-semantic-ui标签来使用Mapbox购买地图。我有四个选项卡A，B，C和D。加载页面后，我看到地图运行正常。但是，当我单击选项卡B时，该地图将呈现在前一张地图的顶部，同时显示两张地图。如何确保一次只渲染一张地图？

const Map = props => {
const { tabName,mapID,layer } = props;
const { mapboxgl } = window;

const mapContainerRef = useRef(null);

useEffect(() => {
    const map = new mapboxgl.Map({
        container: mapContainerRef.current,style: `{mapID}`,});

},[mapID]);

return (
    <div id="map" className="map-container" ref={mapContainerRef} />
)};

这是我的标签页的样子：

const panes = [
{
    menuItem: 'A',render: () => (
        <Tab.Pane>
            <div>
                <Map
                    tabName="A"
                    mapID="AAA"
                    layer="aaa"
                />
            </div>
            <Table states={A} total={Total} tabName="A" />
        </Tab.Pane>
    ),},{
    menuItem: 'B',render: () => (
        <Tab.Pane>
            <div>
                <Map
                    tabName="B"
                    mapID="BBB"
                    layer="bbb"
                />
            </div>
            <Table states={B} total={Total} tabName="B" />
        </Tab.Pane>
    ),}];
const Tabs = () => {
return (
        <Tab panes={panes} />
 )
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）