React Accordion与React Leaflet渲染冲突问题求助

问题概述 #

React项目中，顶部weather-container渲染React Accordion（Forecast组件），底部map-container渲染React Leaflet（OSM组件），出现两个问题：

• 初始状态下Leaflet完全无法渲染
• 注释leaflet.css后，两个组件均占满整个页面，无法实现各占一半的布局

解决方案 #

1. 恢复Leaflet核心样式（解决渲染失败问题） #

必须保留leaflet/dist/leaflet.css的引入，这是Leaflet地图正常渲染的基础，之前的渲染失败并非Accordion干扰，而是缺少Leaflet的基础样式导致。修改OSM组件代码：

import React from 'react'
import {
  MapContainer,
  TileLayer,
  useMap
} from 'react-leaflet'

// 恢复这行样式引入，不能注释
import 'leaflet/dist/leaflet.css'

const OSM = ({data}) => {

  // 替换私有方法_onResize为官方推荐的invalidateSize
  const ResizeMap = () => {
    const map = useMap();
    React.useEffect(() => {
      const handleResize = () => {
        map.invalidateSize();
      };
      window.addEventListener('resize', handleResize);
      // 组件卸载时移除监听
      return () => window.removeEventListener('resize', handleResize);
    }, [map]);
    return null;
  };

  let center = [parseFloat(data[0]), parseFloat(data[1])]

  return (
    <div id="map">
        <MapContainer className="leaflet-container" center={center} zoom={3} scrollWheelZoom={true}>
            <ResizeMap/>
            <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
        </MapContainer>
    </div>
  )
}

export default OSM

2. 通过CSS实现平分布局（解决占满页面问题） #

给父容器和子容器添加布局样式，确保两个区域各占一半视口高度：

/* 父容器设置垂直flex布局，占满整个视口高度 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* 两个子容器平分可用空间 */
.weather-container, .map-container {
  flex: 1;
  overflow: auto; /* 内容超出时自动滚动，避免撑开容器 */
  padding: 1rem; /* 可选，添加内边距优化视觉 */
}

/* 确保Leaflet地图占满父容器空间 */
#map .leaflet-container {
  height: 100%;
  width: 100%;
}

关键说明 #

• Leaflet的leaflet.css包含地图容器的定位、尺寸重置等核心样式，缺失会导致地图无法正常渲染或布局混乱
• 使用flex:1让两个子容器平分父容器的高度，配合overflow:auto避免内容溢出破坏布局
• 替换map._onResize()为官方的map.invalidateSize()，避免依赖Leaflet内部私有方法，提升代码稳定性

内容的提问来源于stack exchange，提问作者disguisedtoast