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

Posted 2023-02-21

【中文标题】如何使 React 组件返回一个 javascript 节点元素

【英文标题】：How to make React component return a javascript Node Element

【发布时间】：2018-04-11 17:49:23

【问题描述】：

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

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 组件返回一个简单的 javascript 节点？

【问题讨论】：

你能把你的VeiculosMap组件的代码贴出来吗？

【参考方案1】：

您不能附加到 JavaScript 节点，因为它们在 html 中不存在。 OpenLayers 呈现为 HTML 元素。您需要为要附加到的任何 HTML 节点创建一个 ref。

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

【讨论】：

您能否详细说明您的答案？我阅读了您链接的文档，但我不明白如何在我的情况下使用 refs。