react-admin标签页表单内基于react-leaflet的自定义地图组件渲染异常

根因分析 #

你遇到的问题本质是Leaflet地图的初始化时机问题：

• react-admin的<TabbedForm>组件默认会隐藏非激活状态的标签页，对应DOM节点的display属性为none
• Leaflet在组件初始化时会读取容器的实际宽高来计算渲染视口，隐藏状态的容器宽高读取结果均为0，所以会出现地图渲染尺寸异常的情况
• 打开开发者工具、页面刷新等操作会触发DOM重排，此时如果对应标签页处于激活状态，Leaflet会重新读取到正确的容器尺寸，地图就恢复正常。

修复方案 #

你可以通过两种常用方式解决这个问题：

• 方案1：监听标签页激活事件，手动触发地图重绘
  你可以在自定义地图组件中监听父级标签页的激活状态，当标签页切换为激活状态时，调用Leaflet实例的invalidateSize()方法强制重新计算容器尺寸。
  参考代码示例：

  import { useRef, useEffect } from 'react';
  import { MapContainer, TileLayer } from 'react-leaflet';
  import { useFormTabState } from 'react-admin';
  
  const CustomMap = () => {
    const mapRef = useRef(null);
    // 读取当前标签页的激活状态
    const isTabActive = useFormTabState();
  
    useEffect(() => {
      if (isTabActive && mapRef.current) {
        // 标签页激活时强制刷新地图尺寸
        mapRef.current.invalidateSize();
      }
    }, [isTabActive]);
  
    return (
      <MapContainer ref={mapRef} center={[51.505, -0.09]} zoom={13} style={{ height: '400px', width: '100%' }}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </MapContainer>
    );
  };
  

• 方案2：修改标签页渲染逻辑，仅在激活时渲染地图
  你也可以给非首屏的标签页加上lazy属性，让react-admin仅在标签页第一次被激活时才渲染内部内容，此时容器已经处于显示状态，Leaflet初始化时就能读取到正确的宽高：

  import { TabbedForm, FormTab, TextInput } from 'react-admin';
  
  const UserEdit = () => (
    <TabbedForm>
      <FormTab label="基本信息">
        {/* 首个标签页内容 */}
        <CustomMap />
      </FormTab>
      <FormTab label="位置信息" lazy>
        {/* 非首个标签页加lazy属性，激活时才渲染 */}
        <CustomMap />
      </FormTab>
    </TabbedForm>
  );
  

优先推荐第二种方案，改动更小也更符合react-admin的设计规范。

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