react-leaflet - 未捕获的类型错误：无法读取未定义的属性“appendChild”

Question

我的组件有以下回报

      <div className="content page-with-map" >
        <div className='route-editor'>
          <Loader loading={routeSectionsLoadingList}/>
          {this.renderRouteSectionsList()}
          <div className='route-map-block'>
            <MapComponent className='route-map'>
              <Pane name='RouteSections' style={{ zIndex: 300 }}>
                <RouteSectionsLayer
                  isAdd={isAdd}
                  isEdit={isEdit}
                  linesData={routeSectionsFeaturesList}
                  selectedLine={selectedSection}
                  setSelectedLine={this.handleSelectSection}
                  hoveredLine={hoveredSection}
                  onMouseOverLine={this.onMouseOver}
                  onMouseOutLine={this.onMouseOut}
                />
              </Pane>
            </MapComponent>
          </div>
        </div>
      </div>
    );

这是我的 MapComponent，我在其中带孩子并添加一些自定义道具。在添加到 DOM 的更高 div 的条件下渲染地图：

  const cityBounds = CITY_BOUNDS;

  // State
  const [bounds, setBounds] = useState(cityBounds);
  const [renderMap, setRenderMap] = useState(false);
  const [zoom, setZoom] = useState();

  const leafletContainerRef = useRef(null);

  useEffect(() => {
    if (leafletContainerRef.current) {
      setRenderMap(true);
    }
  }, [leafletContainerRef.current]);


  const onViewportChanged = (viewport) => {
    const { zoom } = viewport;
    setZoom(zoom);
  };

  const onBoundsChanged = (bounds) => {
    setBounds(bounds);
  };

  const {
    className,
    children,
  } = props;
  let customProps = {};
  return (
    <div className={classNames('leaflet-container', className)} ref={leafletContainerRef}>
      {renderMap ?
        <MapContainer
          bounds={bounds}
          doubleClickZoom={false}
          crs={L.CRS.EPSG3395}
          onViewportChanged={onViewportChanged}
        >
          <TileLayer
            url="https://vec{s}.maps.yandex.net/tiles?l=map&v=20.07.01-0&x={x}&y={y}&z={z}&scale=1&lang=ru_RU"
            subdomains={['01', '02', '03', '04']}
            attribution='<a http="yandex.ru" target="_blank">Яндекс</a>'
          />
          {React.Children.map(children, child => {
            customProps = { ...customProps, onBoundsChanged: onBoundsChanged, bounds: bounds };
            return React.cloneElement(child, customProps);
          })}
        </MapContainer>
        : null}
    </div>
  );
}

还有 RouteSectionsLayer 组件：

export default function RouteSectionsLayer(props) {
  const { isEdit = false, selectedLine } = props;

  const getLines = () => {
    const { onMouseOverLine = () => {}, onMouseOutLine = () => {}, linesData = [] } = props;
    return linesData && linesData.length ?
      linesData.map((lineFeature, i) => {
        const lineIndex = i;
        return <Polyline
          key={hash(lineIndex)}
          pane={'RouteSections'}
          positions={lineFeature.geometry
          && lineFeature.geometry.coordinates
          && lineFeature.geometry.coordinates.map(line => line.map(vertex => vertex.map(coordinate => +coordinate)))}
          attribution={`${i}`}
          lineIndex={lineIndex}
          pathOptions={{
            color: 'black',
            weight: 5,
          }}
        />;
      })
      : null;
  };

  return (
    getLines()
  );
}

渲染时我得到“未捕获的类型错误：无法读取未定义的属性 'appendChild'”。我究竟做错了什么？

更新：我尝试按照文档中的核心架构示例重写 RouteSectionsLayer，现在看起来像这样：

export default function RouteSectionsLayer(props) {

  const leafletContext = useLeafletContext();

  const getLinesData = () => {
    const { input, linesData = [] } = props;
    if (input && input.value) {
      return input.value;
    }
    return linesData;
  };

  useEffect(() => {
    const container = leafletContext.layerContainer || leafletContext.map;
    const linesData = getLinesData();
    const polyLinesInstances = linesData && linesData.length ?
      linesData.map((lineFeature, lineIndex) => {
        const latlngs = lineFeature.geometry && coordsToNumbers(lineFeature.geometry.coordinates);
        const layerOptions = {
          attribution: `${lineIndex}`,
          pane: 'RouteSections'
        };
        const pathOptions = normalRouteSectionStylePathOptions;
        const polyLineOptions = {
          lineIndex: { lineIndex },
          ...layerOptions,
          ...pathOptions
        };
        return new L.Polyline(latlngs, polyLineOptions)
      })
      : [];
    const layerGroupInstance = new L.LayerGroup(polyLinesInstances);
    container.addLayer(layerGroupInstance);
    return () => {
      container.removeLayer(layerGroupInstance);
    };
  });

const coordsToNumbers = (lineCoordinates) => {
  return lineCoordinates && lineCoordinates.length ?
    lineCoordinates.map(line => line.map(vertex => vertex.map(coordinate => +coordinate)))
    : null;
};

错误仍然在这里

Answer 1

好吧，我发现了我的错误。在重新编写的 RouteSectionsLayer 中，我删除了折线选项中的窗格：

const layerOptions = {
   attribution: `${lineIndex}`,
   pane: 'RouteSections' // <-- i deleted this. 
};

似乎找不到我作为 MapComponent 的子项创建的窗格“RouteSections”。