Question

我正在尝试在地图上添加一个组件作为叠加层，但我一直收到此错误：

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

这是我的代码：

insertPoint(data) {
    var cord = ol.proj.transform([data.lng, data.lat], 'EPSG:4326', 'EPSG:3857');
    this.potosVeiculos[data.id] = new ol.Overlay({
        position: cord,
        element: <VeiculosMap id={data.id} user_niv_id={data.user_niv_id} lat={data.lat} lng={data.lng} apelido={data.apelido} niv={data.niv} ignicao={data.ignicao} voltagem={data.voltagem} velocidade={data.velocidade} qualidade_sinal={data.qualidade_sinal} sinal={data.sinal} data_atualizacao={data.data_atualizacao} />,
        positioning: 'bottom-center',
        offset: [12,12]
    });
    map.addOverlay(potosVeiculos[data.id]);
    map.render();
}

如果我执行以下操作，则可以：

insertPoint(data) {
    var cord = ol.proj.transform([data.lng, data.lat], 'EPSG:4326', 'EPSG:3857');
    this.potosVeiculos[data.id] = new ol.Overlay({
        position: cord,
        element: document.createElement('div'),
        positioning: 'bottom-center',
        offset: [12,12]
    });
    map.addOverlay(potosVeiculos[data.id]);
    map.render();
}

我的问题是，如何让React Component返回一个简单的JavaScript节点？

Answer 1

您无法附加到JavaScript节点，因为这些节点不存在于HTML中。 OpenLayers呈现为HTML元素。您需要为要附加到的任何HTML节点创建引用。

https://reactjs.org/docs/refs-and-the-dom.html

如何使React组件返回一个javascript节点元素

1 个答案: