如何解决未捕获的类型错误:无法读取未定义的属性“appendChild”
我的组件有以下返回
<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,我在那里带孩子并添加一些自定义道具。还在将更高 div 添加到 DOM 的条件下渲染地图:
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;
};
错误仍然存在
解决方法
好吧,我发现了我的错误。在重新编写的 RouteSectionsLayer 中,我删除了折线选项中的窗格:
const layerOptions = {
attribution: `${lineIndex}`,pane: 'RouteSections' // <-- i deleted this.
};
似乎找不到我作为 MapComponent 子项创建的窗格“RouteSections”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。