Передать компонент А реагировать на всплывающее окно

Question

Я использую буклет в своем коде реакции, и я не использую реактив. Я хочу передать реагирующий компонент или код jsx в функцию binbPopup для каждой подсказки.

let marker = new L.marker(...).bindPopup(<div>Hi</div>)

bindPopup получает строку в качестве входного, поэтому я не могу использовать jsx. Я также пытался использовать реагирующие порталы, но все равно это не работает. Каково решение этой проблемы?

Answer 1

Вы можете использовать renderToString метод ReactDOMServer для преобразования компонента React в строку разметки.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ReactDOMServer from "react-dom/server";
import * as L from "leaflet";
import "./styles.css";

const CustomReactPopup = () => {
  return (
    <div style={{ fontSize: "24px", color: "black" }}>
      <p>A pretty React Popup</p>
    </div>
  );
};

class App extends Component {

  componentDidMount() {
    var map = L.map("map").setView([51.505, -0.09], 13);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09])
      .addTo(map)
      .bindPopup(ReactDOMServer.renderToString(<CustomReactPopup />))
      .openPopup();
  }

  render() {
    return (
      <div>
        <div id="map" />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);  

Рабочий пример здесь: https://codesandbox.io/s/leaflet-with-react-znk11