Reactjs 18 - 第三方 DOM 库集成 - ReactDOM.render？

Question

我一直在使用 TomTomMap 开发地图应用程序，我需要在地图上渲染一个自定义 Marker 组件，我可以在其中附加不同的 React 事件并更新 React 状态变量。在下面的示例中，这是使用 ReactDOM.render 方法完成的，该方法在 Reactjs 18 中已被弃用。地图和标记是实际的 DOM 节点，当我尝试不同的东西时，我总是在标记上得到 DOM 事件。如果不使用 ReactDOM.Render，如何在 React 18 中实现相同的效果。我有点需要做出反应，并且有点绝望。

const Marker = ({ onClick, children, feature }) => {
  const _onClick = () => {
    onClick(feature.properties.description);
  };

  return (
    <button onClick={_onClick} className="marker">
      {children}
    </button>
  );
};

const Map = () => {
  const mapContainerRef = useRef(null);

  // Initialize map when component mounts
  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-87.65, 41.84],
      zoom: 10,
    });

    // Render custom marker components
    geoJson.features.forEach((feature) => {
      // Create a React ref
      const ref = React.createRef();
      // Create a new DOM node and save it to the React ref
      ref.current = document.createElement("div");
      // Render a Marker Component on our new DOM node
      ReactDOM.render(
        <Marker onClick={markerClicked} feature={feature} />,
        ref.current
      );

      // Create a Mapbox Marker at our new DOM node
      new mapboxgl.Marker(ref.current)
        .setLngLat(feature.geometry.coordinates)
        .addTo(map);
    });

    // Add navigation control (the +/- zoom buttons)
    map.addControl(new mapboxgl.NavigationControl(), "top-right");

    // Clean up on unmount
    return () => map.remove();
  }, []);

  const markerClicked = (title) => {
    window.alert(title);
  };

  return <div className="map-container" ref={mapContainerRef} />;
};

export default Map;

我想将 React 事件附加到标记组件，以便它们可以更新 React 状态变量。

Answer 1

我不确定我是否完全理解您遇到的问题，但我自己使用一段类似的代码在地图上渲染我的自定义标记。我已经不再使用 ReactDOM.render 方法，而是使用 root.render 来代替。

我改编了 mapbox 示例 github 中的示例代码，它看起来与您的几乎相同，所以让我们看看这是否也对您有帮助：

导入以下内容：

import { createRoot } from 'react-dom/client'

用 createRoot 替换 ReactDOM.render 调用：

  createRoot(ref.current).render(
    <Marker onClick={markerClicked} feature={feature} />
  )

我在 CSS 中为 className“标记”添加了自定义背景图像，现在我的自定义标记在我的地图上呈现，控制台中没有任何警告。

希望这有帮助！

Answer 2

首先导入这个：

import { createRoot } from 'react-dom/client';

然后更换

  ReactDOM.render(
    <Marker onClick={markerClicked} feature={feature} />,
    ref.current
  );

与这个：

createRoot(ref.current).render( <Marker onClick={markerClicked} feature={feature} />)